Si entendí, la propiedad que estás buscando, se llama object-fit
.
Eso sí antes, tienes que darle a la etiqueta de imagen una altura y un ancho dependiendo de tu necesidad. Estas son solo de referencia o delimitación, no el tamaño final que optará la imagen.
Lo otro es que será necesario que le puedas dar un alto a la imagen dependiendo de la altura del título, para esto, te sugiero usar calc
para restar al 100% de la altura del contenedor menos la atura del título, así.
.columna img{
height: calc(100% - XXpx);
}
Una vez aplicado lo anterior, podrías usar la propiedad object-fit
así:
Object-fit: cover
img.cover{
object-fit: cover;
}
Si quieres que siempre conserve sus proporciones pero ocupe gran parte o totalmente el contenedor padre.
Object-fit: contain
img.contain{
object-fit: contain;
}
Si quieres que siempre conserve sus proporciones pero además quieres que la imagen no sobrepase las medidas y siempre se ajuste para estar dentro de estas (es decir no se deforme).
Aquí una demo, con el código html tal como lo presentas (aunque use algunas imágenes de referencia que encontré en internet y verifica que son de distinto tamaño):
.contenedor-columnas {
width: 100%;
margin: auto;
text-align: center;
margin-bottom: 50px;
}
.columx2 {
width: 50%;
float: left;
padding: 20px 20px;
box-sizing: border-box;
}
.columna {
height: 200px;
background-color: red;
background-image: url('http://picsum.photos/800/600?image=307');
background-position: center;
background-size: cover;
}
.columx2 h1 {
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
color: #4e3224;
}
.columx2 img {
width: 100%;
margin: auto;
}
.pleca2 {
width: 100%;
height: 20px;
}
.pleca2 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.columna>img{
width: 100%;
height: calc(100% - 60px);/*<-- Yo puse 60px porque más o menos es lo que mide la altura del título, pero tú coloca un número de pixeles que se ajuste*/
object-fit: contain;
}
<section class="contenedor-columnas">
<div class="columx2">
<div class="columna">
<h1>sombreros</h1>
<div class="pleca2">
<img src="https://dgm.azureedge.net/products/lg/fiora-shelf-bronze.png" alt="">
</div>
<img src="https://www.almacenesantonioguerrero.es/wp-content/uploads/2017/06/REF-5114-SOMBRERO-CAN%CC%83ERO-PANAMA.png" alt="" >
</div>
</div>
<div class="columx2">
<div class="columna">
<h1>Accesorios</h1>
<div class="pleca2">
<img src="https://dgm.azureedge.net/products/lg/fiora-shelf-bronze.png" alt="" >
</div>
<img src="https://ugc-prd.dressinglab.com/media/thumbnails/images/products/sombrero-turquesa9828a.png.450x678_q100_upscale.png" alt="" >
</div>
</div>
</section>
Sí puedes modificar el html
(que sería lo mejor) aplicalas las propiedades mediante clases, como hice en los primeros ejemplos.
Por cierto, creo que la imagen que usas para "pleca" debería estar como fondo en el CSS
y no en una etiqueta html y aún mejor, si la colocas como un pseudo-elemento mediante after
o before
de la etiqueta <h1>
ya que si es como creo que la quieres usar, esta no variara nunca y siempre se situara debajo del título.
Consejo
Deberías usar flexbox
en el contenedor padre para que la imagen siempre tome el tamaño restante del espacio que queda, algo así:
.columna{
display: flex;
flex-direction: column;
}
Acá la misma demo, pero aplicando los consejos y cambios que te digo.
.contenedor-columnas {
/*Modifica aquí el tamaño de las columnas y veras que no se deforma la imagen ni se recorta*/
--col-height: 120px;
width: 100%;
margin: auto;
text-align: center;
margin-bottom: 50px;
}
.columx2 {
width: 50%;
float: left;
padding: 20px 20px;
box-sizing: border-box;
}
.columna {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: stretch;
justify-content: center;
height: var(--col-height);
background-color: red;
background-image: url('http://picsum.photos/800/600?image=307');
background-color: #ece0d5;
background-blend-mode: color-burn;/*Esta propiedad es innecesaria, ignorala. La uso simplemente para darle un tono distinto y más claro al fondo*/
background-position: center;
background-size: cover;
}
.title {
width: 100%;
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
color: #4e3224;
line-height: 1em;
margin: 0;
padding: 0.5em;
position: relative;
}
.pleca{
background-image: url('https://dgm.azureedge.net/products/lg/fiora-shelf-bronze.png');
background-position: center calc(100% + 15px);
background-size: 100% 60px;
background-repeat: no-repeat;
padding-bottom: 20px;/*El espacio que ocuparía la pleca*/
}
.columx2 img {
width: 100%;
height: calc(100% - 50px);
object-fit: contain;
}
/*Este estilo de abajo ignoralo, es solo para que puedas jugar con los tamaños de las columnas*/
style{
background: #444;
color: lime;
font-family: monospace;
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
z-index: 2;
padding: 5px;
text-transform: uppercase;
text-align: center;
}
<style contenteditable>.columna {--col-height: 150px;}</style>
<section class="contenedor-columnas">
<div class="columx2">
<div class="columna">
<h1 class="title pleca">Sombreros</h1>
<img src="https://www.almacenesantonioguerrero.es/wp-content/uploads/2017/06/REF-5114-SOMBRERO-CAN%CC%83ERO-PANAMA.png" alt="" >
</div>
</div>
<div class="columx2">
<div class="columna">
<h1 class="title pleca">Accesorios</h1>
<img src="https://ugc-prd.dressinglab.com/media/thumbnails/images/products/sombrero-turquesa9828a.png.450x678_q100_upscale.png" alt="" >
</div>
</div>
<div class="columx2">
<div class="columna">
<h1 class="title pleca">Accesorios</h1>
<img src="https://ugc-prd.dressinglab.com/media/thumbnails/images/products/sombrero-de-verano-con-cinta-negra-y-mono-15759.png.450x678_q100_upscale.png" alt="" >
</div>
</div>
<div class="columx2">
<div class="columna">
<h1 class="title pleca">Accesorios</h1>
<img src="https://agropublicidad.com/wp-content/uploads/2017/03/SOMBRERO-SAFARI-CAMUFLAJE-T-132-AGROPUBLICIDAD.png" alt="" >
</div>
</div>
<div class="columx2">
<div class="columna">
<h1 class="title pleca">Accesorios</h1>
<img src="https://officialpsds.com/imageview/rv/k2/rvk2n4_large.png?1524855863" alt="" >
</div>
</div>
</section>
Si tienes alguna duda, déjame tu comentario.