具有设定高度的响应式图像设计答案

【问题标题】：Responsive image design with a set height具有设定高度的响应式图像设计
【发布时间】：2016-09-14 13:38:24
【问题描述】：

如果有人可以帮助我解决响应式图像的小问题，我会很高兴。

我有一个我希望我的形象达到的高度。 200 像素和大约 100% 的容器宽度。这就产生了图像被拉伸并且看起来不太好的问题。如果有任何方法可以使图像保持其比例并且仍然看起来不错，我会很高兴。我可以在它周围放一个具有设定高度的容器并制作这样溢出的东西就隐藏在顶部和底部的所有东西后面吗？我该怎么做最简单的方法？

还有什么其他可以解决问题的建议吗？

【问题讨论】：

请发布您的代码。
您可以使用background-size: cover。检查这个link
宽度：自动，高度：200px。边距：0 自动

标签： javascript html css image responsive-design

【解决方案1】：

你解决这个问题的方法是错误的。您不能同时对height 和width 施加约束并保持图像的纵横比。

对于这种情况，请考虑以下 CSS：

img {
  height: 200px;
  width: auto;
}

【讨论】：

【解决方案2】：

有一个名为background-size 的css 属性，我通常将其用于此类情况。 background-size 结合 background-position 可能是您正在寻找的。下面的例子。

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

.container {
  width: 500px;
  margin: 15px auto;
  padding: 15px;
  background-color: #FFFFFF;
}

.hero {
  width: 100%;
  height: 200px;
  background-image: url('http://www.redcross.org/images/MEDIA_CustomProductCatalog/m17844381_TheHero_763x260_PRE.JPG');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.content {
  width: 100%;
}

<div class="container">
  <div class="hero"></div>
  <div class="content">
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p>
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p>
    <p>This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet. This is content lorem ipsum dolor sit amet.</p>
  </div>
</div>

在我的示例中，“英雄”图像为 763x260 像素，显示它的容器 div 为 470x200 像素，但它仍然适合其容器的“最佳方式”。

【讨论】：

【解决方案3】：

您可以使用background-size:cover轻松做到这一点

【讨论】：