时间戳

首页 > 解决方案 > 两列，图像左内容右 - 调整图像大小而不是内容

html - 两列，图像左内容右 - 调整图像大小而不是内容

问题描述

我有一个左侧的两列布局图像和右侧的文本内容。当屏幕调整大小时，文本内容正在调整大小。如何调整代码以调整图像而不是文本的大小？

<div class="content-block-container">
    <img src="image.jpg">
    <div class="content-block-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis justo nisl, vel suscipit lectus dignissim
            ut. Aenean sed auctor lorem. Suspendisse eget dapibus est, a egestas dolor. Phasellus lobortis non lacus in sodales.
            Mauris at est justo. Quisque at risus eu odio lobortis suscipit. Etiam nulla elit, tincidunt feugiat nunc a,
            vulputate volutpat lectus. Integer commodo at tellus a tristique. Suspendisse nec sollicitudin sem, non volutpat
            neque. Donec maximus nec purus vel fermentum. Mauris eu nulla efficitur, pharetra dolor fringilla, placerat justo.
        </p>
        <pLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis justo nisl, vel suscipit lectus dignissim ut.
            Aenean sed auctor lorem. Suspendisse eget dapibus est, a egestas dolor. Phasellus lobortis non lacus in sodales.
            Mauris at est justo. Quisque at risus eu odio lobortis suscipit. Etiam nulla elit, tincidunt feugiat nunc a,
            vulputate volutpat lectus. Integer commodo at tellus a tristique. Suspendisse nec sollicitudin sem, non volutpat
            neque. Donec maximus nec purus vel fermentum. Mauris eu nulla efficitur, pharetra dolor fringilla, placerat
            justo.</p>
    </div>
</div>

<style>
    .content-block-container {
        align-items: end;
        display: flex;
    }

    .content-block-container img {
        border: 5px #fff solid;
        margin-right: 30px;
    }

    .content-block-content {
        display: flex;
        flex: 1;
        flex-direction: column;
    }

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

</style>

jsfiddle

标签： htmlcss

解决方案

你可以像这样在你的 img 标签中添加一个带有 precent 值的“width”属性：

<img src="image.jpg" width="30%">

推荐阅读