当屏幕尺寸减小时，为什么我的图像没有响应？答案

【问题标题】：Why is my image not responsive when screen size decreases?当屏幕尺寸减小时，为什么我的图像没有响应？
【发布时间】：2019-10-20 07:15:21
【问题描述】：

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

我知道使图像具有 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

我希望它随着屏幕尺寸的减小而缩小图像，因此签名/正文/侧面不必堆叠。如果可能，请提供帮助。谢谢！

【问题讨论】：

我建议添加html 和css 作为标签。此外，将代码放在 jsfiddle 或类似文件中（除了您的帖子），其他人更容易做出回应。
谢谢@joshvito！完成。
enter code here这属于你的html吗？
@joshvito 我以为我把它拿出来了？我再也看不到这一点了。
听起来你可以考虑使用弹性盒来实现你的结果。看看stackoverflow.com/questions/31476024/…

标签： html css image responsive-design responsive-images

【解决方案1】：

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

【讨论】：

那行得通；我知道我脑子里放了个屁，哈哈。谢谢@EshgheCode！