Lo que estoy intentando hacer, es ajustar la imagen que tengo en un carousel
para que ésta никакой se muestre desproporcionada. Como se muestra actualmente es de la siguiente manera:
Ми Este es código css
que ajusta el div
основной y la imagen Комо tal:
#demos .owl-carousel .item {
height: 280px;
display: block;
overflow: hidden;
}
#demos .owl-carousel .item > img {
position: relative;
height: 16.5rem;
}
Море Lo que buscó es que la imagen proporcional al div
que la envuelve, de antemano agradezco su ayuda.
Если то, что ты хочешь, состоит в том, чтобы изображение наладило в контент тебя div
, то, что ты можешь делать, состоит в том, чтобы добавлять ее как background в div
в cuestiГіn со свойством CSS background-image
и использовать свойство background-size: contain
, что harГЎ, что изображение redimensione имея в виду tamaГ±o div.
добавил Тебе пример, в котором есть два div
различного tamaГ±o и в обоих aГ±ado то же изображение как background. Поскольку ты можешь наблюдать, в двух изображение redimensiona, чтобы занимать mГЎximo tamaГ±o возможно div
без pixelarse ни растягивать.
.imagenContenida{
background-image: url("https://miro.medium.com/max/1200/0*UEtwA2ask7vQYW06.png");
background-size: contain;
background-repeat: no-repeat;
}
#imagen1{
height: 100px;
width: 300px;
}
#imagen2{
height: 200px;
width: 850px;
}
<div id="imagen1" class="imagenContenida"></div>
<div id="imagen2" class="imagenContenida"></div>