html - 在没有一堆不同的图像大小和媒体查询的情况下使图像具有响应性的更有效方法？

Question

我正在一个响应式网站上工作，到目前为止，除了 Logo ( Logo 是 PNG 图像)之外，所有内容都是响应式的。我知道我可以使用媒体查询，但我已经意识到使用这种方法我需要不同尺寸的同一图像的多个版本。有没有更有效的方法来完成这个？此外，如果媒体查询是唯一的选择，我应该将它们制作成什么样的尺寸，以便我的网站在所有设备上看起来都不错。感谢所有的帮助!

我唯一尝试过/能想到的另一件事是使用 % 作为背景，但它在移动设备上仍然显示为垂直拉伸(stretch)。

  <div id="imgLogoDiv">
    <img id="imgLogo" src="/img/giphylogo_V1.png" alt="unable to load image">
  </div> 

#imgLogoDiv {
    display: flex;
    justify-content: center;
    height: auto;
}

#imgLogoDiv #imgLogo {
    width: 45%;
    height: auto;
    /*to make responsive use a % for width not px*/
}

@media (min-width: 320px) and (max-width: 480px) {

    body {
        background-image: url(img/mobileBackground.jpg);
        background-position: top center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    /*This looks a bit better but there might be a better method.*/
    #imgLogoDiv #imgLogo {
        content: url("img/mobileLogo.png");
    }
}

Answer 1

I understand I am able to use media queries but I have realized with this method I would need many versions of the same image with different sizes.

这里几乎没有其他选项。

选项 1:使用通用样式。 Bootstrap 使用类 img-fulid使图像适合任何视口(viewport)

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

例如:<img src='gify.gif' class='img-fluid' />

选项 2:杠杆 sizes和 srcset图像的属性。所以你可以避免使用大量的媒体查询

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"> 

更多阅读 here