时间戳

首页 > 解决方案 > 在屏幕变小，在屏幕侧面接触图像之前使图像缩小

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

问题描述

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

对于响应式图像，只要屏幕与图像一样大，图像就会变小，然后图像会随着屏幕变小（如果我是对的）。但我试图让图像在屏幕变小后立即变小。这是页面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 的初学者。

有一个美好的一天，并保持安全。

标签： imagecsshtmlresponsive

解决方案

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

推荐阅读