小编iam*_*eir的帖子

我试图了解对我来说似乎是出乎意料的行为:

我在容器内部有一个最大高度为100%的元素,该元素也使用了最大高度,但是,出乎意料的是,子元素溢出了父元素:

测试用例:http://jsfiddle.net/bq4Wu/16/

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 
}

img { 
    display: block;
    max-height: 100%; 
    max-width: 100%; 
}

但是,如果父级具有明确的高度,则这是固定的:

测试用例:http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

有谁知道为什么孩子在第一个例子中不会尊重其父母的最大身高？为什么需要明确的高度？

有关askthecssguy.com的文章展示了如何使用固定背景更改/反转滚动图像:http://askthecssguy.com/articles/mike-asks-the-css-guy-about-a-scrolling-trick-with -background图像/

我的目标是通过让图像漂浮在其他元素(在本例中是图像)上来进一步理解这个概念.

你可以在这里看到结果:http://playground.iamkeir.com/invert-logo/v2/

但是,我的实现使用了多余的元素,所以,我想知道是否有人有任何想法/建议的另一种方式来实现这一点？

Javascript肯定是一个选项,但我担心它不会是精益/优雅.有人还建议使用Canvas.

欢迎任何想法!谢谢.

一直在使用新版本的Masonry,它似乎工作得更顺畅,特别是对于我正在做的流畅/响应式构建.

然而,我遇到的一个问题是 - 我不知道如何移除.masonry容器最右侧的装订线,以便物品与边缘齐平.

这是codepen示例:http://codepen.io/iamkeir/pen/xlcBj

我可能会设置一个宽度并overflow:hidden裁掉最后一个差距,但并不理想.

同样,我尝试添加一个,padding-left: 1%但这会改变容器的宽度,因此百分比不再准确.

任何想法/提示将不胜感激!

我正在尝试在 CSS 中的图像上创建一个弯曲的剪贴蒙版。

曲线本质上只是一个非常宽的椭圆的下半部分。

一个要求是角度/曲率不会根据图像的高度/宽度而改变——它应该始终保持一致。

这是一个视觉效果：

尝试 1：边界半径/溢出隐藏/固定宽度

问题：图像高度影响曲率，没有最大宽度

img { max-width: 100%; vertical-align: top; }
.block { max-width: 320px; background: blue; }
.block-2 { max-width: 200px; background: blue; }

.curve {
  overflow: hidden;
  width: 500px;
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -250px;
  text-align: center;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="block">
  <div class="curve">
    <img src="http://placehold.it/320x180" />
  </div>
</div>

<br />

<div class="block-2">
  <div class="curve">
    <img src="http://placehold.it/320x100" />
  </div>
</div>

尝试 2：明显的一种 - 裁剪图像

问题：尺寸之间仍然不一致但接近。然而，客户端/CMS 可能意味着不是一个选项。

尝试 3：剪辑路径

问题：不一致的曲线，flakey …