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:
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?