¿Cómo puedo ajustar la imagen al tamaño del div que la envuelve?
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>