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

Question

如果你有一个div固定宽度的父级,是否可以让一个孩子<img>比父级宽,同时约束比例,同时还保留垂直空间？

虽然position:absolute;可以将图像从正常文档流中分离出来,但我不想删除图像保留的垂直空间.如果我这样做,图像后面出现的任何内容都会被向上推,结果会出现在图像后面.

这是一个小例子.

图1表示我想要的垂直行为.显然,如果图像水平较大,则高度应按比例增加.图2表示我想要的水平行为.但是,这不会保留垂直空间.我试验了负利润,但无法获得任何可行的工作.

假设未知的图像尺寸,没有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将使图像拉伸到屏幕宽度，margin-left: 50%将图像的左边框居中到包装器的中心，然后transform: translateX(-50%)将图像向左移动其宽度的 50%。

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

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

Answer 2

一旦浏览器支持赶上，您可以考虑使用calc负边距。

演示使用calc()

html {
  font-size: 10px; /* Set a base value for easy math, or for sane defaults */
}

body {
  background-color: #FC9;
  margin: 0;
}

#wrapper {
  font-size: 1.9rem; /* Or whatever */
  background-color: #FFF;
  margin: 0 auto;
  padding: 3rem;
  width: 400px;
}

#wrapper img.one {
  display: block;
  margin: 3rem 0;
  width: 100%;
}

#wrapper img.two {
  display: block;
  width: 100vw;
  /* 
   * Math break: 
   *   viewport width: 100vw
   *   #wrapper width: 400px
   *   remainder: (100vw - 400px)
   *   want to shift the image by half of the remainder, so: (100vw - 400px) / 2
   *   and apply it as a negative margin: -1 * (100vw - 400px) / 2)
   */
  margin: 3rem 0;
  margin-left: -webkit-calc(-1 * (100vw - 400px) / 2);
  margin-left: calc(-1 * (100vw - 400px) / 2);
}

如果您对固定宽度#wrapper元素的要求不严格，您实际上可以使用vw整个元素，如下所示：

#wrapper {
  ...
  width: 40vw;
}

这简化了margin-left使用硬编码vw单元的声明，它具有更好的浏览器支持：

#wrapper img.two {
  display: block;
  width: 100vw;
  /* 
   * Math break: 
   *   viewport width: 100vw
   *   #wrapper width: 40vw
   *   remainder: 100vw - 40vw = 60vw
   *   want to shift the image by half of the remainder, so: 60vw / 2 = 30vw
   *   and apply it as a negative margin: -30vw
   */
  margin: 3rem 0 3rem -30vw;
}

直接演示vw

在这种情况下，如果此设计需要支持屏幕宽度，低于该宽度40vw您的内容包装器看起来很粗糙，您将需要使用媒体查询将视口宽度的更高百分比分配给#wrapper，或者降级设计，以便它使用不同的布局计算，并且不使用内容跨度图像。