0

Tengo una imagen, un parrafo y un par de botones dentro de un div. El problema es que la imagen se hace mas grande cuando el parrafo tiene demasiados caracteres. Es decir que el div se ajusta al tamaño del parrafo y lo que a mi me gustaría hacer es que se ajuste al tamaño de la imagen original y el parrafo se divida en lineas. Adjunuto una imagen:

introducir la descripción de la imagen aquí

La primera imagen (arriba a la izquierda) es la que esta aumentada. La segunda (arriba a la derecha) tiene el tamaño original y es el que quiero consevar. Y la tercera imagen es solo para mostrar que también estoy usando imagenes horizontales (todas la imagenes originales tienen el mismo "height" y las horizontales el doble de "width" que las verticales).

Creo que es las clases que hay que modificar para que funcione como expliqué antes son la clase colunma y la clase title. El resto son clases de Bootstrap y en princípio creo que no influyen en el problema.

CÓDIGO CSS:

.colunma
{
    margin:auto;    
}

@media only screen and (max-width: 768px) 
{
    .title
    {
        width: 100%;
        height:auto;   
    }
}

@media only screen and (min-width: 700px) 
{
    .title
    {
        width: 100%;
        height:70px;        

        display: inline-block;      
        overflow: hidden:
        word-wrap: break-word;
    }
}

CÓDIGO HTLM:

    <div class="colunma">
          <div class="card mb-4 shadow-sm"   >                
          <a class=""  href="">           
            <img class="card-img-top" src="imagen.jpg" alt="imagen no cargada">  
            <div class="card-body">
                <p class="card-text title"> 
                TITULO 
               </p>               
            </div>              
        </a>                      
    <div class="d-flex justify-content-between align-items-center">
    <div class="btn-group   container">
    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="">Modificar</button>
    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="">Eliminar</button>
    </div>  
    </div>
    </div>
    </div>

¿Alguna idea de cómo hacerlo?

2
  • Quieres que tus tarjetas siempre tengan el mismo tamaño? o estas cambiaran de tamaño según el dispositivo? Commented el 27 mar. 2019 a las 6:11
  • Si, cambian de tamaño... Pero solo quiero que se hagan mas pequeñas de su tamaño original y en ningún caso mas grandes. No tengo problemas con pantallas pequeñas, el problema es si la pantalla es demasiado grande como la de un PC. Commented el 27 mar. 2019 a las 18:01

2 respuestas 2

0

Lo que puedes realizar es asignar un contenedor independiente para la imagen, por ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>
      Ejemplo
    </title>
	 <meta charset="UTF-8" />
  </head>
  <body>
    <style>
      div{
       width:100%;
      }
      div img{
       /*
       El tamaño asignado aqui no deberia ser
        modificado por el texto*/
        width:40%;
      }
    </style>
    <div>
      <div>
        <img src="https://pluralsight.imgix.net/paths/path-icons/css-c9b214f0d7.png">
      </div>
      <p>
        El texto no modificara el tamaño de la imagen
		El texto no modificara el tamaño de la imagen
		El texto no modificara el tamaño de la imagen
		El texto no modificara el tamaño de la imagen
		El texto no modificara el tamaño de la imagen
		El texto no modificara el tamaño de la imagen
		El texto no modificara el tamaño de la imagen
      </p>
    </div>
  </body>
</html>

Considera que el contenedor padre (tu div principal)en algunos casos donde no se especifique rígidamente su tamaño, su tamaño sera definido por sus hijos en este caso tu texto define el tamaño del padre, las imágenes a su vez responderán al tamaño del padre.

1
  • Hola, muchas gracias por contestar... tu solución me funciona con las imagentes verticales pero con las horizontales no tanto... es decir el problema con el texto se soluciona pero las imagens horizontales ahora se me quedan mas pequeñas de lo que deberian ser... En principio todas las imagenes tienen el mismo alto pero diferente ancho... lo hice así para poder colocarlas en filas homogeneas y que quedara estético. Commented el 27 mar. 2019 a las 18:13
0

No conseguí hacerlo con CSS puro. Al final necesité usar JavaScript para tratar el tamaño de cada imagen.

Lo solucioné de esta forma:

Primero añadí unos IDs a estos elementos.

<img class="card-img-top" src="imagen.jpg" alt="imagen no cargada" id="img_x> 

<div class="card-body"    id="cb_x">

Y luego los redimensioné en el evento onLoad de esta forma

   $("#img_x").on("load", function(e) 
   {
        var cb = $("#cb_x");

        this.width  = this.naturalWidth;        

        cb.css("max-width", this.naturalWidth + "px");      
        cb.css("min-height", "100px");
   });

Ahora no tengo ningún problema, todas las imagens verticales son del mismo tamaño y las verticales también. Y además todas son responsive. Ojalá le sea útil a alguien.

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.