Question

我正在使用图片为我的网站制作标题。该图像的高度和宽度分别为= 100vw和100vh。问题是，当视口为480px时，图像会变形。

我试图解决问题，创建一个我想要的比例的新图像，并使用bootstrap执行此操作：

 @media screen and (max-width: 480px) {
    #imgTOPO::after {
        content:url("/assets/head_480-01.png");
    }
}

但是图像没有变化，我无法解决问题。我该怎么做才能解决这个问题？

Answer 1

这是一种可能的解决方案。

HTML：

<img src="someImg.png" class="largeImg" />
<img src="someImg.png" class="smallImg" />

<强> CSS：

 .largeImg {
    display:block;
  }

  .smallImg {
    display: none;
  }

  @media screen and (max-width: 480px) {
   .largeImg {
      display: none;
   }

   .smallImg {
     display: block;
   }
  }

我希望有所帮助！:) @Mariana

Answer 2

problrem是height值，img的宽度和高度都设置为填充视口，以保持纵横比删除height = 100vh或设置为height = auto。< / p>

img {
    width: 100vw;
    height: auto;
}

<img src="https://placeimg.com/640/480/any">

它解决了变形的问题，但是如果您仍想为每个分辨率加载不同的图像以获得响应，那么您可以查看srcset https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

当视口小于480时，图像的来源发生变化

2 个答案: