在屏幕变小，在屏幕侧面接触图像之前使图像缩小

Posted 2023-03-05

【中文标题】在屏幕变小，在屏幕侧面接触图像之前使图像缩小

【英文标题】：Make image shrink as soon as screen gets smaller, before the side of the screen touches the image

【发布时间】：2020-07-17 02:00:31

【问题描述】：

我正在努力实现某些目标，但我不知道正确的方法。希望有人可以在正确的方向上帮助我。

对于响应式图像，一旦屏幕与图像一样大，图像就会变小，然后图像会随着屏幕变小（如果我是对的）。但我试图让图像在屏幕变小后立即变小。 这是https://videosafari.nl/banner-test/ 的页面，它是关于红色徽标（NPO1）的。

实际的问题是，当屏幕变小时，徽标下方的图像会变小，但徽标的大小保持不变。我希望徽标与其下方的图像保持比例，所以我希望它变得更小。有什么建议吗？

    .carousellogo 
    display: inline-block;
    margin: 0px 0px 12px 30px;

    <div class="carousellogo"><img src="https://videosafari.nl/wp-content/uploads/800px-NPO_1_logo_2014.svg_.png"    class="alignleft size-full wp-image-23274" /></div>

原始图像是 但我将其缩小以确保图像在视网膜屏幕上保持清晰。宽度=“75”高度=“”。

我希望我已经足够清楚了，感谢您抽出宝贵时间阅读我的问题。顺便说一句，我只是 css 和 html 的初学者。

祝你有美好的一天，保持安全。

【参考方案1】：

您可以在.carousellogo 上使用width: calc(4vw + 30px); 将元素的宽度控制为视口的4%，然后再增加30px。我测试了代码calc(4vw + 30px) 看起来非常适合您在桌面和移动设备上的网站。希望对您有所帮助。

【讨论】：

谢谢！它确实有效，但我确实对此有一些疑问。为什么我们要添加 30px 呢？我们不能给 4vw 更高的价值吗？我如何确保它永远不会被拉伸得比原始图像大？我应该给它一个 max-width: 吗？再次感谢您的帮助！

如果我们只给 4vw，元素会收缩和拉伸太快，看起来不太好看。这就是为什么我通过 calc 添加了另一个像素以使元素收缩和拉伸更慢。但是，您也可以在元素上尝试 max-width 并查看结果。