Question

我正在建立一个响应式网站。在主页上我有很多文章，其缩略图应以230px * 115px的全尺寸桌面输出显示。文章发布者将上传所有尺寸的图像，而没有特定的设置宽高比。

我目前只有基于它的父容器调整图像大小的代码。宽度将是它的父容器的100％，高度是自动的，并且将根据原始图像的纵横比而变化。

.img {
  width:100%;
  height:auto!important;
}

真的没有削减芥末。

我的研究建议使用背景大小的背景图片：封面。这是一个很好的方法，是否有可能使盖子在水平和垂直方向上居中？并且相应地工作？

更多的方向会很棒我们在那里有很多文章，但我无法找到满足我需求的确切答案。

更新：@LGSon那是伟大的谢谢你。这是迄今为止我尝试过的最佳解决方案....我喜欢在div中控制图像的方式。完善。我想现在差异在于如何控制div的宽高比。如果我将宽度设置为它仍然固定的高度的50％。

Answer 1

您的<img>规则很好，但您必须将每个<img>打包到另一个容器中，该容器的宽度为{0}}

Answer 2

您应该将图像规则与其他规则一起设置。

.img {
    width:100%;
    max-width:100%;
}

你知道图像的尺寸还是意外？

上述规则是指您在设计中控制图像及其比例。

默认情况下，高度为自动，添加！对它来说很重要。

使用背景图像是一个很好的功能，但封面不能按预期完成工作。它覆盖容器，图像伸展或缩小，根据需要完全填充。出于执行原因，也不建议使用背景图像，因为无论是否在页面上显示或不作为css文件的一部分加载它们，除非您根据需要使用该请求加载CSS文件，这是不必要的。

这有帮助，我很乐意澄清。

我也不同意有关将父容器的高度设置为auto的注释，因为它什么都不做。这是默认行为......

Answer 3

你可以这样做：

<强> CSS

div {
  display: block;
  overflow: hidden;
}

.img {
  width: 200%;
  height: auto!important;
  margin: -50%;
}

<强> HTML

<div>
  <img class="img" src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png">
</div>