如何在桌面尺寸屏幕上缩小图像

Question

我正在做我的项目，并且在设置我的标题图片并使其响应时非常挣扎，当我终于完成它在手机和平板电脑上看起来很棒但在桌面屏幕上太大了。我已经迷路了，不知道我的响应式设置是否可以让图像变小。 这是我的代码和打印屏幕。

HTML

<header class="shape"> 
        <div>
            <img class="image-hero" src="assets/images/holiday.webp" alt="holiday">
        </div>
        
    </header>

CSS：

body, html {
    height: 100%;
}



.image-hero {
    width: 100%;
    height: auto;
}

我在网上寻找任何线索，但实际上我现在害怕做任何事情来破坏其他一切。

Answer 1

图片很大，因为尺寸设置为100%。将最小宽度和图像大小更改为您需要的。

@media screen and (min-width: 1200px) {
   .image-hero {
    width: 200px;
}

反之亦然，设置您需要的图像大小，然后进行媒体查询以针对移动设备进行调整。

如果您使用百分比作为图像大小，那么它将是父元素（标题和/或 div）的百分比

<header>
  <div>
     <img class="image-hero" src="assets/images/holiday.webp"   
       alt="holiday">
  </div>
</header>

媒体查询的位置很重要，将其添加到设置图像大小的代码下方，因为媒体查询需要覆盖它。
https://www.w3schools.com/css/css3_mediaqueries.asp