Почему мое изображение не реагирует на изменения размера экрана? - PullRequest
Новая
       27

Почему мое изображение не реагирует на изменения размера экрана?

1 голос
/ 04 июня 2019

Таким образом, у меня есть умственный блок относительно того, почему изображение не уменьшается, когда экран уменьшается в размере. Я создаю блок подписи и хочу, чтобы изображение уменьшилось / стало отзывчивым, чтобы вся оболочка не помещалась в два столбца; Я бы хотел, чтобы это был всего один.

Я знаю, что максимальная ширина изображения должна составлять 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>

Кодовый вид здесь

Я бы хотел, чтобы оно уменьшало изображение при уменьшении размеров экрана, чтобы подпись / тело / стороны не складывались. Пожалуйста, помогите, если это возможно. Спасибо!

1 Ответ

0 голосов
/ 04 июня 2019

попробуйте использовать единицы просмотра порта вместо процентов.вот ссылка, посмотрите: https://www.w3schools.com/cssref/css_units.asp

...