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来应用负边距。

<强> DEMO using 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;
}

<强> DEMO of straight-up vw

在这种情况下，如果此设计需要支持屏幕宽度低于其内容包装器的40vw看起来很粗糙，那么您需要使用媒体查询来指定更高的视口百分比宽度为#wrapper，或降低设计以使其使用不同的布局计算，并且不使用内容生成图像。

Answer 3

利用着名的“填充底部”黑客。由于padding-bottom始终相对于其元素的宽度，因此您可以使用图像的比例padding-bottom来保持所需的高度，同时仍然保持响应。

div {
    position: relative;
    width: ...px;
    height: 0; // very important!
    padding-bottom: 56.25%; // image ratio in % - 16:9 for example
    overflow: hidden;
}
div > img { 
     position: absolute;
     width: ...;
     height: auto;
}

Answer 4

如果你允许另一个<div>包围每个图像，这可以很容易地完成。

HTML：

<div id="wrapper">
   text blah blah
   <div class="image-wrapper">
      <img src="pic.jpg"/>
   </div>
   more text blah blah
</div>

CSS：

#wrapper {
    margin: 0px auto;
    width: 400px;
}

.image-wrapper {
    width: 200%;
    position:relative;
    left:-50%;
}

.image-wrapper img {
    display: block;
    margin: 0px auto;
    max-width: 80%;
}

基本上你将图像包裹在一个非常宽的<div>中，这样你就可以将图像置于其中心。

根据需要调整数字。 max-width: 80%是200％的80％，因此图片实际上是您的大#wrapper宽度的160％。

这是一个基于你的小提琴：http://jsfiddle.net/bdh0mrLs/

Answer 5

这个怎么样？

#wrapper img.one {
display: block;
margin: 30px auto;
width: 130%;
margin-left:-15%;
}

这是Jsfiddle

基本上将宽度设置为高于100％且“15％”边距来自

130/2 - 50
(width / 2) - 50

应该以它为中心。

P.S：我根据你的问题提出了这个问题。然而你的jsfiddle似乎你想要图像是身体的100％宽度。如果这是您的期望，只需要澄清。可以尝试解决这个问题。

Answer 6

by this code you don't need to change margin from top or bottom

<style>
.wrapper
{
width: 400px;
margin:auto;
background:#e6e6e6;
}

.wrapper img
{
width:120%;
clear:left;
margin-left:-10%;
}
</style>

<div class="wrapper">

Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu
<img src="http://wallpoper.com/images/00/31/09/01/pokemon-pikachu_00310901.jpg" />
Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu Pikachu
</div>

Answer 7

尝试使用overflow-y：hidden，同时保持overflow-x：在父div中可见。

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

7 个答案: