0

Tengo lo siguiente en html5 y css3, el problema es que la imagen no me respeta el contenedor div y quiero que la imagen se ajuste automáticamente al tamaño del contenedor para que se mantenga dentro de dicho contenedor marcado con un fondo rojo. en el <div class="pleca2"> marcado con fondo azul ira otra imagen pero las 2 deben mantenerse dentro del <div class="columna"> logrando un resultado exactamente igual ya que cuento con las 3 imágenes que se muestran abajo. introducir la descripción de la imagen aquí

lo que tengo me da el siguiente resultado introducir la descripción de la imagen aquí

.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:red;
	/*background: url("img/Texture_madera.png");*/
	background-position: center;
	background-attachment: contain;
	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;
  background:blue;
}

.pleca2 img {
	width: 100%;
}
<section class="contenedor-columnas">
            <div class="columx2">
                <div class="columna">
                    <h1>sombreros</h1>
                    <div class="pleca2">
                        <img src="img/Pleca cafe-01.png" alt="">
                    </div>
                    <img src="http://i1196.photobucket.com/albums/aa419/yourtrustytime/1_zpss0ayfhqy.png" alt="">
                </div>
            </div>
            <div class="columx2">
                <div class="columna">
                    <h1>Accesorios</h1>
                    <div class="pleca2">
                        <img src="img/Pleca cafe-01.png" alt="" >
                    </div>
                    <img src="http://i1196.photobucket.com/albums/aa419/yourtrustytime/1_zpss0ayfhqy.png" alt="">
                </div>
            </div>
        </section>

3
  • ¿Quieres el texto sobre la imagen?
    – gugadev
    Commented el 18 sept. 2018 a las 19:48
  • @gugadev no para eso uso una imagen de fondo para dar otro estilo y sobre ese fondo queden 2 imágenes sobre dicho fondo
    – Richard
    Commented el 18 sept. 2018 a las 19:53
  • Te deje una respuesta ¿Has revisado la propiedad Objetc-fit? Commented el 18 sept. 2018 a las 21:35

3 respuestas 3

4

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.

2
  • la classe title pleca no lo veo en el css o usas lo de la clase columnx2 h1 para hacer lo de la pleca ?
    – Richard
    Commented el 18 sept. 2018 a las 23:16
  • Al final no las use, ya que pensaba en un principio generar la "pleca" con un seudoelemento, pero al final, lo resolvi con un background-image en el título, por lo que no hice mucho uso de la clase, aunque ahora que me lo recordaste voy a actualizar mi respuesta para incluirlo, separando la parte estructural ".title" de la decorativa ".pleca". Commented el 19 sept. 2018 a las 0:01
3

Lo primero que debes hacer es hacer la imagen de fondo absoluta o en su defecto, ponerla como background-image. Lo segundo, puedes usar flexbox para tener una columna de dos elementos para .columna, en donde el h1 ocupará 40px de alto y el resto de espacio lo ocupará .pleca2. Adicionalmente, haciendo este último elemento flex, obligará a "estirar" la imagen hija ocupando así siempre todo el alto que tenga .pleca2.

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.contenedor-columnas {
	width: 100%;
	margin: auto;
	text-align: center;
	margin-bottom: 50px;
}

.columx2 {
	width: 45%;
	float: right;
	/*padding: 20px 20px;*/
}

.columx2:nth-child(odd) {
  float: left;
}

.columna {
  display: flex;
  flex-direction: column;
	height: 250px;
  background:red;
	/*background: url("img/Texture_madera.png");
	background-position: center;
	background-attachment: contain;
	background-size: cover;*/
  position: relative;
}

.columna h1 {
  align-items: center;
  display: flex;
  justify-content: center;
  flex: 0 0 40px;
	font-size: 20px;
	text-transform: uppercase;
	font-weight: bold;
	color: #4e3224;
  width: 100%;
  z-index: 5;
}

/* Esto puede cambiarse por un background-image en .columnx2 */
.columna > img {
  left: 0;
  height: 100%;
  position: absolute;
	width: 100%;
  top: 0;
  z-index: 1;
}

.pleca2 {
  display: flex;
  flex: 1;
  padding: 5px; /* para que la imagen no quede muy ajustada */
	width: 100%;
  z-index: 5;
}

.pleca2 img {
  display: inline-block;
	width: 100%;
}
<section class="contenedor-columnas">
  <div class="columx2">
    <div class="columna">
      <h1>sombreros</h1>
      <div class="pleca2">
        <img src="https://www.freeiconspng.com/uploads/white-hat-icon-9.png">
      </div>
      <img src="https://image.freepik.com/free-vector/wood-texture_1083-21.jpg">
    </div>
  </div>
  
  <div class="columx2">
    <div class="columna">
      <h1>Accesorios</h1>
      <div class="pleca2">
        <img src="https://placehold.jp/200x200.png" alt="">
      </div>
      <img src="https://image.freepik.com/free-vector/wood-texture_1083-21.jpg" alt="">
    </div>
  </div>
</section>

Tip: para lograr el borde de la imagen usa la propiedad border-image.

-1

Si la imagen se encuentra dentro de un <div> podemos aplicarle un width: 100%;

div img{
  width: 100%;
}

1
  • Gracias, pero como puedes observar en el código que deje de ejemplo, ya utilizo el width y dicha propiedad no funciona por si solo, para el problema que se describe.
    – Richard
    Commented el 11 jul. 2022 a las 16:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.