Question

Trolls：为长篇文章道歉，但我希望这是关于这个主题的首选问题，所以我正在把时间用于彻底解决。

拿这个HTML：

<div class="parent">
  <img class="child" src="some-image.jpg"/>
</div>

这个CSS：

html, body{

  width:100%;
  height:100%;

}

.parent{

  width:100%;
  height:80%;

  background-color:green; /* for better highlighting of issues */

}

对于我的客户，我总是发现需要在响应大小的元素中包含图像，同时保持其宽高比。这是迄今为止我遇到的最常见和令人沮丧的跨浏览器问题。我尝试了许多不同的解决方案。

让我更好地描述一下我的目标。

以下是Chrome解释上述代码的方式：

example

我想要的是，在这个例子中，图像（带有中心+符号的橙色）是父（绿色区域）的中心，并且它尽可能宽，而不会超出包含元素的高度。同样，如果图像真的很长很薄，那么图像应该填充父图像的宽度，并保持比例，理想地折叠父图像的高度以适应，或者至少保持对div的中心。

那么......我（以及其他许多人）尝试过什么？

尝试1

制作.child绝对和.parent亲戚，以便可以使用margin:auto将儿童欺骗到中心位置，同时保持正确的身高。

.parent{

  position: relative;

  width:100%;
  height:80%;

  background-color:green;

}

.child{

  position:absolute;

  width:auto;
  height:100%;

  left:0;
  right:0;
  top:0;
  bottom:0;

  margin: auto;

}

这导致了Chrome：

attempt 1.1

似乎很好，但有问题：

margin:auto技巧在IE7或以下
图片仅尊重height:100% CSS，因此当浏览器视口宽度较小时，您会收到以下信息：

attempt 1.2

尝试2

使用max-width和max-height使图像尽可能宽/高。

.parent{

  width:100%;
  height:80%;

  text-align:center;

  background-color:green;

}

.child{

  max-height:100%;
  max-width:100%;

}

这会在Chrome中产生这一点：

attempt 2.1

同样，这很好。但是有一些问题：

IE6及以下似乎使图像和父级变得略大于80%定义的高度。大概是因为他们不支持max-width和max-height CSS属性？
当浏览器视口变得比图像允许的高度更窄时，它会调整大小，但图像不再居中，并且父级的高度保持80%，使我们的图像单独渲染页面顶部。（在一个完美的世界中，父元素的高度会缩小，以适应现在较小的图像尺寸。在一个不那么完美的世界中，图像至少会在父元素中垂直居中。）：

attempt 2.2

到目前为止，这些是我在不使用JavaScript的情况下找到的唯一部分可接受的解决方案。

问题

是否有其他纯CSS / HTML解决方案可以规避所述问题？

我是否过多地询问了盒子模型？

基于百分比的元素中包含流体图像的最后一个字？

0 个答案: