redimensionar - medidas imagen css

¿Cómo puedo cambiar el tamaño de una imagen de forma dinámica con CSS a medida que cambia el ancho/alto del navegador?

Question

Me pregunto cómo podría hacer que una imagen cambie de tamaño junto con la ventana del navegador, here es lo que he hecho hasta ahora (o descargue todo el sitio en un ZIP ).

Esto funciona bien en Firefox, pero tiene problemas en Chrome: la imagen no siempre cambia de tamaño, de alguna manera depende del tamaño de la ventana cuando se cargó la página.

Esto también funciona bien en Safari, pero a veces la imagen se carga con su ancho / alto mínimo. Tal vez esto es causado por el tamaño de la imagen, no estoy seguro. (Si se carga bien, intente actualizar varias veces para ver el error).

¿Alguna idea sobre cómo podría hacer esto más a prueba de balas? (Si se necesita JavaScript, también puedo vivir con eso, pero es preferible CSS).

Answer 1

Solución 2018:

Usar unidades relativas a ventanas gráficas debería facilitarle la vida, dado que tenemos la imagen de un gato:

Ahora queremos este gato dentro de nuestro código, respetando las proporciones de aspecto:

img {
  width: 100%;
  height: auto;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Hasta ahora no es realmente interesante, pero ¿qué pasa si queremos cambiar la altura de los gatos para que sea el máximo del 50% de la ventana gráfica?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

La misma imagen, pero ahora restringida a un ancho máximo de 50vw vw (= ancho de la vista) significa que la imagen tendrá un ancho X de la ventana gráfica, según el dígito proporcionado. Esto también funciona para la altura:

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Esto restringe la altura de la imagen a un máximo del 20% de la ventana gráfica.

Answer 2

¿Estás usando jQuery?

Debido a que hice una búsqueda rápida en los complementos de jQuery y parece que tienen algún complemento para hacer esto, verifique esto, debería funcionar:

http://plugins.jquery.com/project/jquery-afterresize

EDITAR:

Esta es la solución CSS, simplemente agrego un style = "width: 100%" , y funciona para mí al menos en Chrome y Safari. No tengo, es decir, así que solo prueba allí, y avísame, aquí está el código:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

Answer 3

Establezca la propiedad de cambio de tamaño a ambos. Luego puede cambiar el ancho y la altura de esta manera:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

Answer 4

Esto se puede hacer con CSS puro y ni siquiera requiere consultas de medios.

Para hacer que las imágenes sean flexibles, simplemente agregue max-width:100% y height:auto . max-width:100% imagen max-width:100% y height:auto funciona en IE7, pero no en IE8 (sí, otro error raro de IE). Para solucionar esto, necesita agregar width:auto/9 para IE8.

fuente: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto/9; /* ie8 */
}

Y si desea imponer un ancho máximo fijo de la imagen, simplemente colóquelo dentro de un contenedor, por ejemplo:

<div style="max-width:500px;">
    <img src="..." />
</div>

JSFiddle ejemplo aquí . No se requiere JavaScript Funciona en las últimas versiones de Chrome, Firefox e IE (que es todo lo que he probado).

Answer 5

Inicialmente, estaba usando el siguiente html / css:

img {
  max-width: 100%;
  height: auto;
  width: auto/9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

Luego agregué class="img" al <div> esta manera:

<div class="img">
  <img src="..." />
</div>

Y todo comenzó a funcionar bien.

Answer 6

Puede usar scale propiedad de scale CSS3 para cambiar el tamaño de la imagen con css:

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Lectura adicional :

• Transformaciones 2D CSS3
• Transiciones, transformaciones, animaciones de efecto de desplazamiento CSS3

Answer 7

window.onresize = function(){
    var img = document.getElementById(''fullsize'');
    img.style.width = "100%";
};

En IE onresize event se dispara en cada cambio de píxel (ancho o alto) por lo que podría haber un problema de rendimiento. Retraso en el cambio de tamaño de la imagen durante unos pocos milisegundos mediante el uso de javascript''s window.setTimeout ().

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html