Cambiar el tamaño de una imagen en función del tamaño del DIV en el que se encuentra con CSS?

A continuación se muestra una imagen de un blog en el que estoy trabajando. Sin embargo, necesito ayuda con algunos CSS. En la imagen superior, puede ver lo que sucede con mi avatar cuando el cuerpo del texto a la derecha es más grande que la imagen.Cambiar el tamaño de una imagen en función del tamaño del DIV en el que se encuentra con CSS?

La imagen inferior es como quiero que se vea.

Mi problema es que hay varios autores, por lo que el texto del cuerpo a la derecha puede tener diferentes longitudes según el autor. Me gustaría que la imagen se cambie de tamaño para que siempre se ajuste a la div y se vea como en la imagen inferior.

Esperemos que todo tenía sentido, si alguien sabe cómo hacer esto le agradecería cualquier ayuda

También puse un código de ejemplo hasta aquí para verlo en directo http://dabblet.com/gist/2050005

enter image description here

Fuente

2012-03-17 JasonDavis

vigor las imagen a un tamaño específico, independientemente del tamaño del original.

css:

.size-image img { 
width: 200px; 
height: 200px; 
}

Tamaño ser cualquier tamaño que necesita/desea rellenar. En el html simplemente agregue la clase al elemento img.

<img src="path/to/image" class="size-image" />

Entonces cualquier imagen puesto en ese elemento, ya sea por jquery, php o lo que sea, el elemento está dimensionada para específicamente lo que necesita/quiere.

También puede poner la imagen en su propio contenedor, diga "contenedor izquierdo" y tenga el ancho del contenedor izquierdo con un ancho específico con altura automática, solo coloque la etiqueta <img> en el contenedor izquierdo y el texto en el "derecho-contenedor"

esperanza esto ayuda

Fuente

2012-03-17 01:07:20

gracias por su ayuda, mi problema ahora es si tuviera que ponerlo a 200 píxeles, no estoy seguro de cuánto tiempo había la información bio va a ser así que, si fuera más larga, podría extenderse aún más, o podría ser mucho más pequeña. Tal vez si establezco 'max-width' y' max-height' arreglaría este problema – JasonDavis

Luego pruebe la idea de contenedor izquierda/derecha. crea un 'div' padre luego un' div' como un contenedor izquierdo, que contendrá el 'img' y el contenedor derecho que alojará el texto. Incluso si el tamaño del texto es mayor que el tamaño de la imagen, siempre permanecerá en su contenedor.Solo asegúrate de hacer flotar el contenedor izquierdo para flotar, a la izquierda en el siguiente 'div' FUERA del contenedor' div' asegúrate de borrar ese flotador –

Pensando en ello, para cambiar el tamaño de la imagen "dinámicamente", puedes hacer ancho: 100% y alto: 100% pero el problema es que si el ancho del elemento de la imagen o que contiene div impide que crezca (debido al texto a la derecha), la altura de la imagen permanecerá restringida al ancho . Debería centrarse en los contenedores en lugar de cambiar el tamaño de una imagen. Además de perder calidad de imagen cuando estira imágenes –

por qué no puede usted acaba de hacer:

<!doctype html> 
<html> 
    <head> 
     <style type="text/css"> 
      #img-div { width: 250px; } 
      #img-div img { width: 100%; } 
      #text-div { } 
     </style> 
    </head> 
    <body> 
     <div id="img-div"> 
      <img src="example.jpg" /> 
     </div> 
     <div id="text-div"> 
      Lorem ipsum dolor blah blah blah 
     </div> 
    </body> 
</html>

que funciona para mí. El único problema es cuando la imagen real es más pequeña que el ancho del div que contiene, entonces se pixela.

Fuente

2012-03-17 01:40:39 Tim

Esto funcionará para usted ..

utilizar CSS para establecer

img { max-width: 100%; max-height: 100% }

Fuente

2013-02-03 05:24:57 Swarup

estoy usando esto:

.product p.image { 
text-align: center; 
width: 220px; 
height: 160px; 
overflow: hidden; 
} 
.product p.image img{ 
max-width: 100%; 
max-height: 100%; 
}

Fuente

2017-09-03 13:51:52 Flavio

Cambiar el tamaño de una imagen en función del tamaño del DIV en el que se encuentra con CSS?

Respuesta

Cuestiones relacionadas