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

Question

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

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

  <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

您的解决方案适用于许多浏览器，但在 Safari (iPhone) 中存在问题。您需要更改策略并在移动时将固定高度应用于徽标大小：

<style>
@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;
    }
    #imgLogoDiv #imgLogo {
       width: auto;
       height: 70px;
    }
}
</style>

正在删除内容属性

Answer 2

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 使用 class img-fulid 使图像适合任何视口

.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

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

More efficient way to make images responsive without a bunch of different image sizes and media queries?

html

css

responsive-design