#css #flexbox
Вопрос:
Я знаю, что есть МНОГО примеров этого, и я перепробовал все из них безрезультатно. Я пытаюсь создать компонент карусели, который изменяет размер изображений в соответствии с его границей. Я использую его во множестве мест, множеством разных способов, поэтому он ДОЛЖЕН быть отзывчивым. Мне также нужно, чтобы изображения были доступны для кликабельности как обычные изображения для a11y клиентов и клиентов (управление ожиданиями).
Вот моя скрипка до сих пор: https://codepen.io/skamansam/pen/NWvroeY?editors=1100
Я могу соответствующим образом изменить размер всех элементов (используя максимальную ширину/высоту). когда я использую изображение, которое шире, чем выше, все работает хорошо. Когда я использую изображение, которое выше, чем шире, и превышает высоту поля, изображение переполняется вместо соблюдения свойств максимальной ширины/высоты.
Наиболее распространенный ответ включает в себя обертывание изображения в html-элемент и установку там ширины/высоты, что я и сделал, но это не решает проблему. Другой распространенный ответ предполагает использование комбинаций position значений, которые не дали лучших результатов, чем у меня уже есть. Используя инспектор, вы можете четко видеть, что все элементы, КРОМЕ изображения, имеют правильный размер, и изображение переполняет контейнер.
Есть ли какой-либо другой способ заставить img тег уважать height: 100% так же, как он уважает width: 100% ?
Комментарии:
1. Твоя скрипка, кажется, ничего не делает. Это не иллюстрирует проблему. Это просто синий квадрат и пара стрелок.
2. @BrettDonald Я обновил скрипку, чтобы использовать codepen вместо jsfiddle. codepen.io/skamansam/pen/NWvroeY?editors=1100
Ответ №1:
вы используете изображение с очень высоким разрешением (500×800) , у вас немного более низкое разрешение, в противном случае вам придется использовать overflow:hidden; на вашем div для упаковки.Используя максимальную ширину:100%; изображение уже изменяет размер, но не может изменить его еще больше, проверьте элемент, чтобы лучше понять.
Комментарии:
1. Мне приходится использовать изображения с более высоким разрешением, так как я не знаю размер изображений. Знаете ли вы способ динамического изменения размера этих изображений с помощью css или javascript? Я предполагаю, что это будет более обременительным (читай: ресурсоемким), чем необходимо.
2. к счастью, ответ находится внутри самого picksum, он позволяет вам выбрать разрешение изображения, которое вы хотите, вы выбрали (500×800), которое слишком велико, вы можете использовать следующие уменьшенные разрешения >(50×80), (100×160), (180×288), (190×304), (200×320). Я уверен, что вы получите желаемый результат, используя (180×288) или (190×304)
Ответ №2:
Я внес три изменения:
- Ваши потребности в слайде
width: auto;иheight: 100%; - Ваш имидж нуждается
width: 100%;иheight: 100%; - Вашему изображению нужен
object-fit: contain;(не обложка)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.jumbotron {
display: block;
width: 100%;
margin: 0;
padding: 0;
background-color: #aaa;
/* overflow: hidden; */
height: 150px;
}
.jumbotron .container {
width: 100%;
height: 100%;
}
.my-carousel {
background-color: #77f;
max-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
// overflow: hidden;
}
.my-carousel .previous-btn, .my-carousel .next-btn {
font-size: 200%;
padding: 0px 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.my-carousel .content {
max-height: 100%;
max-width: 100%;
align-self: center;
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.my-carousel .content .slide {
height: 100%;
//max-width: 100%;
display: none;
position: relative;
// width: 100%;
vertical-align: middle;
padding: 0px;
margin: 0px;
overflow: visible;
}
.my-carousel .content .slide.active {
display: block;
}
.my-carousel .content .slide img {
//position: relative;
// margin: 0px auto;
// box-sizing: border-box;
// vertical-align: middle;
height: 100%;
width: 100%;
// max-width: 100%;
// max-height: 100%;
object-fit: contain;
object-position: center;
overflow: hidden;
}
.my-carousel .content .slide .caption {
position: absolute;
background-color: rgba(0,0,0,.4);
text-shadow: 2px 2px 4px #fff, -2px -2px 4px #fff;
stroke: 2px #fff;
padding: 10px;
bottom: 0px;
width: 100%;
font-size: 150%;
// color: #000;
// -webkit-text-stroke-width: 1px;
// -webkit-text-stroke-color: #fff;
} <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.3.95/css/materialdesignicons.min.css" rel="stylesheet"/>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<div class="my-carousel">
<div class="previous-btn">
<span class="mdi mdi-transfer-left"></span>
</div>
<div class="content">
<div class="slide active">
<img src="https://picsum.photos/500/800?random=1" />
<div class="caption">This is only a WIP to figure out how to style this carousel properly.</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1000/400?random=1" />
</div>
</div>
<div class="next-btn">
<span class="mdi mdi-transfer-right" />
</div>
</div>
</div>
</section>
</main> Ответ №3:
к счастью, ответ находится внутри самого «picksum», он позволяет вам выбрать разрешение изображения, которое вы хотите, вы выбрали (500×800), которое слишком велико, вы можете использовать следующие уменьшенные разрешения >(50×80), (100×160), (180×288), (190×304), (200×320). Я уверен, что вы получите желаемый результат, используя (180×288) или (190×304) , например: <img src="https://picsum.photos/190/304?random=1" />
Ответ №4:
Использовать max-width и max-height
Подобный этому
.slide {
width: 100px;
height: 100px;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.slide .img {
max-width: 100%;
max-height: 100%;
}
Комментарии:
1.Это по-прежнему не работает, так как нарушает требование оперативности реагирования. Настройка
slidewidth» иheight100%» уже есть и, очевидно, тоже не работает.2. Попробуйте использовать
object-fitсвойство3. Я тоже пытался это сделать, но это тоже не сработало.