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

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

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

1 个答案: