Создание информационной карты с отзывчивым изображением

Я пытаюсь создать информационную карту, где, если экран большой, у вас будет изображение, заполняющее левую половину карты и текст справа, и если экран небольшой у вас будет изображение сверху и текст внизу. Я смог сделать первую часть, добавив position: absolute;top: 0;left: 0;bottom: 0;width: 40% и настройку background-image: src;background-size: cover;, а затем установив margin-left: 40% на содержание. Но в конечном итоге это затрудняет адаптацию структуры к экрану без какого-либо javascript. Я хотел бы избежать использования js в максимально возможной степени для этого, поэтому я искал решения в Интернете и получал ответы, такие как использование flexbox и использование свойства css object-fit, но ни один из них не работал. Вот мой код:Создание информационной карты с отзывчивым изображением

.signup-form-wrapper { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 400px; 
 
    width: auto; 
 
    border: 1px solid rgb(200, 200, 200); 
 
    margin: 10px 0px; 
 
} 
 
.img-wrapper { 
 
    height: 100%; 
 
    width: 50%; 
 
} 
 
.img-wrapper img { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
.content-wrapper { 
 
    display: inline-block; 
 
    max-width: 60%; 
 
    text-align: center; 
 
    padding: 0px 14%; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<body> 
 
    <div class='signup-form-wrapper'> 
 
    <div class='img-wrapper'> 
 
     <img src='http://www.parkermeridien.com/media/pool_fashion_f.jpg' /> 
 
    </div> 
 
    <div class='content-wrapper'> 
 
     <p>Hello, World!</p> 
 
    </div> 
 
    </div> 
 
</body>

источник

2016-12-20 modsoussi

Вы были на правильном пути!

Медиа-запросы (которые вы экспериментировали) - это правильный способ сделать это без JavaScript. Я вернулся к использованию background-image вместо img. Вот простой способ сделать это, используя float для сохранения элементов бок о бок, с медиа-запросом (в нижней части CSS), который отключает плавание, поэтому элементов.

Я также добавил box-sizing: border-box; для всех элементов, чтобы предотвратить добавление/границы от изменения размера элементов (что является хорошей практикой).

body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.signup-form-wrapper { 
 
    height: 350px; 
 
    border: 1px solid rgb(200, 200, 200); 
 
    margin: 10px 0px; 
 
} 
 
.img-wrapper { 
 
    height: 100%; 
 
    width: 40%; 
 
    float: left; 
 
    background-image: url('http://www.parkermeridien.com/media/pool_fashion_f.jpg'); 
 
    background-size: cover; 
 
} 
 
.content-wrapper { 
 
    float: left; 
 
    width: 60%; 
 
    text-align: center; 
 
    padding: 0px 14%; 
 
} 
 
@media (max-width: 768px) { 
 
    .img-wrapper, 
 
    .content-wrapper { 
 
    width: auto; 
 
    float: none; 
 
    height: 175px; 
 
    } 
 
}

<body> 
 
    <div class='signup-form-wrapper'> 
 
    <div class='img-wrapper'> 
 
    </div> 
 
    <div class='content-wrapper'> 
 
     <p>Hello, World!</p> 
 
    </div> 
 
    </div> 
 
</body>

источник

2016-12-20 22:19:45

Word, это потрясающе! Что делать, если я не хочу устанавливать высоту '.signup-form-wrapper', или хотите установить его на' auto'? Тогда установка высоты '.img-wrapper' на' 100% 'больше не будет работать. Любой способ избежать этого? – modsoussi

@modsoussi Вам нужно будет определить высоты где-нибудь с помощью этого метода, если вы не вернетесь к использованию 'img' и не захотите, чтобы размеры изображения определяли высоту вашего элемента. –

Хорошо, что это отлично! – modsoussi

Создание информационной карты с отзывчивым изображением

ответ

Смежные вопросы