Estoy haciendo un portafolio para un sitio web, aquí está el código. Quiero que las imágenes se vean más pequeñas y también tomar el ancho completo como en el ejemplo. Pero me gusta que se parezcan más a un cuadrado. Intenté manipular con la altura, pero no mostraría toda la imagen, recortaría la imagen y no quiero que estas imágenes se recorten cuando se hacen más pequeñas.
¡Gracias por adelantado!
.cards{
background-size: cover;
background-position: center;
padding-right: 5rem;
padding-left: 5rem;
padding-top: 135px;
padding-bottom: 135px;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section class="container-fluid">
<h1>Portfolio</h1>
<div class="row">
<div class="col-md-3 cards" style="background-image: url(https://xubuntu.org/wp-content/uploads/2018/04/f51c/IMG_3397_2560x1600-web.jpg);"></div>
<div class="col-md-3 cards " style="background-image: url(https://xubuntu.org/wp-content/uploads/2018/04/469a/pesseguinho-web.jpg);"></div>
<div class="col-md-3 cards" style="background-image: url(https://xubuntu.org/wpcontent/uploads/2018/04/8fbb/40103442821_db033c72a4_o-web.jpg);"></div>
<div class="col-md-3 cards" style="background-image: url(https://xubuntu.org/wp-content/uploads/2018/04/3ed0/2017_07_21_23_33_13_03-web.jpg);"></div>
</div>
<div class="row">
<div class="col-md-4 cards" style="background-image: url(https://xubuntu.org/wpcontent/uploads/2018/04/e68e/Winter_Wonderland_by_Sarah_Muenz-web.jpg);"></div>
<div class="col-md-4 cards" style="background-image: url(https://xubuntu.org/wp-content/uploads/2018/04/c099/EastHarbourSunrise-web.jpg);"></div>
<div class="col-md-4 cards" style="background-image: url(https://xubuntu.org/wp-content/uploads/2018/04/f51c/IMG_3397_2560x1600-web.jpg);"></div>
</div>
</section>Use la clase en bootstrap para imágenes y no imágenes de fondo.
<img src="..." class="img-fluid" alt="Responsive image">
img-fluid se estirará el 100% del ancho
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras