为什么我的图像在屏幕尺寸减小时没有响应？

Question

所以我有一个心理障碍，为什么当屏幕尺寸减小时图像没有减小。我正在创建一个签名块，我希望图像减少/响应，所以整个包装器不会堆叠成两列；我希望只有一个。

我知道使图像具有 100% 的最大宽度和自动高度应该使它响应，但它并没有使它如此。我以为给包装器一个宽度和 div 育儿它会做，但它没有。

    .wrapper {
        max-width: 100%;
        height: auto;
    }

    .leftSide {
        float: left;
        padding: 20px 0;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    img,
    .rightSide {
        margin: 20px;
    }

    .rightSide {
        display: inline-block;
        font-size: initial;
    }

<div class="wrapper">
    <div class="leftSide">
        <img src="https://dummyimage.com/200x150/000/fff" alt="">
    </div>`enter code here`
    <div class="rightSide">
        <p><span>First Last</span>&nbsp;Company Title</p>
        <hr>
        <p><span>P</span>&nbsp;<a href="tel:">&#40;123&#41;456-7890</a>&nbsp;&nbsp;&nbsp;<span>E</span>&nbsp;<a href="mailto:">123&#64;abccompany.com</a></p>
        <p><span>URL</span>&nbsp;<a href="" target="_blank">www.company.com</a></p>
    </div>
</div>

Codepen 视图 here

我希望它能随着屏幕尺寸的缩小而缩小图像，这样签名/正文/侧面就不必堆叠。如果可能请协助。谢谢！

Answer 1

尝试使用 view-port 单位而不是百分比。这是一个参考，看看： https://www.w3schools.com/cssref/css_units.asp

为什么我的图像在屏幕尺寸减小时没有响应？

Why is my image not responsive when screen size decreases?

html

css

image

responsive-design

responsive-images