html - 在保留垂直空间的同时使图像比父 <div> 更宽？

Question

如果你有 parent div固定宽度，是否可以让 child <img>比父级更宽，同时限制比例，同时还保留垂直空间？

同时 position:absolute;可以打破正常文档流中的图像，我不想删除图像保留的垂直空间。如果我这样做了，出现在图像之后的任何内容都会被向上推，结果，它会出现在图像后面。

Here's an example fiddle.

图像一代表我想要的垂直行为。显然，如果图像在水平方向上较大，则高度应按比例增加。图二代表我想要的水平行为。但是，这不会保留垂直空间。我尝试了负边距，但无法获得任何可行的效果。

假设图像尺寸未知，没有 JavaScript 是否可以达到预期的效果？

Answer 1

试试这个:

#wrapper img.two {
    display: block;
    margin: 30px 0;
    width: 100vw;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

width: 100vw 会让图片拉伸(stretch)到屏幕宽度，margin-left: 50% 会让图片的左边框居中到 wrapper 的中心，然后 transform: translateX(-50%) 会将图像向左移动其宽度的 50%。

您可以将图像宽度设置为您想要的任何值。它将保持居中，顶部和底部都有边距。

演示: http://jsfiddle.net/7cjr6jff/