缩小屏幕后如何缩小图像？

debugcn 发表于 Dev

探戈曼

我用弹性盒

html

<div class="sorts__descr">
    <p>bla bla</p>
    <div class="coffee">
       <img src="./img/sorts/rob.png" alt="coffee">
    </div>
</div>

ass

&__descr
        display: flex
        justify-content: space-between
        align-items: start
        img
            position: relative
            margin: 0 40px
            max-width: 530px
            border-radius: 20px
        p
            font-size: 18px
            line-height: 135%

输出为：在此处输入图像描述

我尝试使用其他方法，例如：

    width: 100%;
    height: auto;

要么

    max-width: 100%;
    height: auto;

要么

    width: 100%;
    max-width: 400px;
    height: auto;

当我为图像指定最大宽度：100％时，结果是：在此处输入图像描述

我希望屏幕缩小时像这样：在此处输入图像描述

VeryBadCoder

您是否尝试过使网站具有响应能力？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.</p>

<img src="img_girl.jpg" style="width:100%;">

</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。