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

Question

如果任何人能够帮助我解决响应式图像的问题，我会更聪明。

我有一个高度，我想要我的形象。 200 px和容器宽度的约100％。这就产生了图像被拉伸并且看起来不太好的问题。如果我有任何方式可以使图像保持其比例并仍然看起来很好，我会更加干净。我可以在它周围设置一个具有设定高度的容器，并使溢出隐藏在顶部和底部的每个东西后面，我如何以最简单的方式做到这一点？

任何其他消息如何才能解决问题？

Answer 1

你解决这个问题的方法是错误的。您不能对height和width设置约束并保持图像的宽高比。

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

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

Answer 2

有一个名为background-size的css属性，我通常用于这种情况。 background-size与background-position相结合可能是您正在寻找的。示例如下。

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在我的例子中，＆＃34;英雄＆＃34;图像是763x260px，它显示的容器div是470x200px但它仍然适合最好的方式＆＃34;它的容器。

Answer 3

您可以使用background-size:cover

轻松完成此操作