Question

我有一个不同大小的图像。都有巨大的图像。我需要在容器内没有任何拉伸的情况下显示图像。那个容器有一些高度。所以我已经将图像显示在容器内部而没有任何拉伸。我需要在html中使用图像而不是背景图像。这是我的代码

＆＃13;

.image-container {
  height: 420px;
  width: 100%;
}

@media (max-width: 480px) {
  height: 310px;
}

@media (max-width: 375px) {
  height: 275px;
}

@media (max-width: 320px) {
  height: 240px;
}

.image-container img {
  max-height: 100%;
  object-fit: contain;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

＆＃13;

<div class="image-container">
  <img src="http://media.gettyimages.com/photos/under-the-tree-picture-id480585809" />
</div>

＆＃13;

当我使用上面的代码图像是拉伸。有没有什么办法解决这一问题？请为此提出任何解决方案。

先谢谢。

Answer 1

始终先重置所有元素的边距和填充。

 * {
    margin: 0;
   padding: 0;
}

如果高度或宽度为自动，则不会拉伸/改变原始图像。

.img-container {
    width: 420px;    // your width
}

.img-container img {
    width: 100%;
    height: auto;
    display: block;
}

删除媒体查询。您的语法不正确使用它们的正确语法是：

@media (max-width: 480px) {
  .img-container {
      // some changes in the class props
   }
   .another-class-change-for-480px-max-width-of-screen {

   }
}

Answer 2

在你的CSS中使用max-width而不是width来避免拉伸

.img-container img{ max-width:100%; height:auto;}

Answer 3

为此的最新解决方案是将object-fit用于IMG。

注意：IE11不支持。 Check support here。

两个图像都相同。第二张图片有object-fit: cover

.fitImage {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

<img src="https://i.picsum.photos/id/292/200/300.jpg" alt="">
<img src="https://i.picsum.photos/id/292/200/300.jpg" alt="" class="fitImage">

使用jQuery

$(document).ready(function() {
  $(".fitImage").each(function(index) {
    var imageUrl = $(this).find('img').prop("src");
    $(this).css('background-image', "url(" + imageUrl + ")")
  });
});

.fitImage {
  height: 200px;
  width: 200px;
  background-size: cover;
  background-position: center;
}

.fitImage img {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fitImage">
  <img src="https://i.picsum.photos/id/292/200/300.jpg" alt="">
</div>

响应式设计中的图像拉伸

3 个答案: