Mi inconveniente es relacionado a un carrusel de imágenes específicamente a la visualización de las mismas ya que no logro ajustarlas al contenedor, se que con la propiedad object-fit:contain
se lo puede hacer y ya lo he tratado pero sigo viendo solo un porcentaje de cada imagen.
Las imágenes tienen de altura: 1280 y ancho: 333. A parte estoy utilizando "MultiSlider" para esto del carrusel.
En el html tengo lo siguiente:
<div class="principal-slider">
<div id="slider">
<div class="MS-content">
<div class="item">
<img class="img-slider" src="../RSC/slider/1.jpeg" alt="" id="imgSLIDE1">
</div>
<div class="item">
<img class="img-slider" src="../RSC/slider/1.jpeg" alt="" id="imgSLIDE2">
</div>
<div class="item">
<img class="img-slider" src="../RSC/slider/1.jpeg" alt="" id="imgSLIDE3">
</div>
<div class="item">
<img class="img-slider" src="../RSC/slider/1.jpeg" alt="" id="imgSLIDE4">
</div>
<div class="item">
<img class="img-slider" src="../RSC/slider/1.jpeg" alt="" id="imgSLIDE5">
</div>
</div>
<div class="MS-controls">
<button class="MS-left" id="btnIzqSlide">
<i class="icon-left-dir"></i>
</button>
<button class="MS-right" id="btnDerSlide">
<i class="icon-right-dir"></i>
</button>
</div>
</div>
</div>
En el css tengo las siguientes líneas adentro de un @media screen and (max-width:360px)
:
/*---SLIDER---*/
.principal-slider{
width:100%;
margin: auto;
}
#slider {
position: relative;
width: 100%;
margin: 0 auto 45px 0;
box-shadow: 0 0 0 0 #1E2126,
0 5px 25px;
}
#slider .MS-content {
white-space: nowrap;
overflow: hidden;
width: 100%;
}
#slider .MS-content .item {
display: inline-block;
width: 100%;
object-fit: contain;
position: relative;
vertical-align: top;
overflow: hidden;
height: auto;
white-space: normal;
}
#slider .MS-controls button {
position: absolute;
top: 35px;
}
#slider .MS-controls .MS-left {
left: 10px;
}
#slider .MS-controls .MS-right {
right: 10px;
}
Según el editor no hay problemas de lógica en el html ni en el css pero yo creo que alguna cosa me falla en el css.
Les dejo una foto de como se encuentra el resultado:
Les dejo el link para MultiSlider: https://www.multislider.info/
Por lo pronto seguiré investigando.
100%
a laimg
esto lo haces por el css#slider .MS-content .item img {width: 100%;}
o en la etiquetahtml
deimg
width="100%"