一旦屏幕变小，在屏幕的一侧接触到图像之前使图像缩小

Question

我正在努力实现某些目标，但我不知道正确的方法。希望有人能帮助我朝着正确的方向前进。

对于响应式图像，只要屏幕与图像一样大，图像就会变小，然后图像会随着屏幕一起变小（如果我是对的）。但是我试图在屏幕变小后让图像变小。这是 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" alt="" width="75" height="" class="alignleft size-full wp-image-23274" /></div>

原始图片的宽度为 width="149" height="100" 但我将其缩小以确保图片在视网膜屏幕上保持清晰。宽度="75" 高度="".

希望我说得足够清楚，感谢您花时间阅读我的问题。顺便说一句，我只是 css 和 html.

的初学者

祝你有美好的一天，注意安全。

Answer 1

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

一旦屏幕变小，在屏幕的一侧接触到图像之前使图像缩小

Make image shrink as soon as screen gets smaller, before the side of the screen touches the image

html

css

image

responsive