html - 响应式设计中的图像拉伸(stretch)

Question

我有一张不同尺寸的图片。都有巨大的图像。我需要在容器内显示没有任何拉伸(stretch)的图像。那个容器有一些高度。所以我已经展示了图像以适合容器内部而没有任何拉伸(stretch)。我需要在 html 中使用图像而不是背景图像。这是我的代码

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

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

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

提前致谢。

Answer 1

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

 * {
    margin: 0;
   padding: 0;
}

如果高度或宽度是自动的，它不会拉伸(stretch)/改变原始图像。

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

   }
}