Escala de imágenes proporcionalmente en CSS con ancho máximo

Question

En este momento, estoy usando el ancho máximo para escalar las imágenes que quepan. Sin embargo, no escalan proporcionalmente. ¿Hay alguna manera de hacer que esto suceda? Estoy abierto a Javascript/jQuery.

Si es posible, ¿hay alguna manera de hacer esto sin conocer las dimensiones originales de la imagen (puede determinar esto usando Javascript/jQuery)?

Answer 1

es necesario especificar el ancho y la altura original:

<img src="/whatever" width="100" height="200" alt="Whatever" /> 

y luego usar algo como esto en el CSS:

#content img { max-width: 100%; height: auto } 

Usted podría intentar esto con jQuery si no tiene la anchura y la altura en la delantera, pero su kilometraje puede variar:

$(function(){ 
    $('#content img').load(function(){ 
     var $img = $(this); 
     $img.attr('width', $img.width()).attr('height', $img.height()); 
    }); 
}); 

Obviamente reemplazar #content con el selector al que desee asignarle la funcionalidad.

Answer 2

al configurar constante uso anchura:

height: auto 

Answer 3

function resizeBackground() { 
    var scale=0; 
    var stageWidth=$(window).width(); 
    var newWidth=$("#myPic").width(); 
    var stageHeight=$(window).height(); 
    var newHeight=$("#myPic").height(); 
    if($(window).width() > $(window).height()) { 
     scale = stageHeight/newHeight; 
     scale = stageWidth/newWidth; 
    } else { 
     scale = stageWidth/newWidth; 
     scale = stageHeight/newHeight; 
    } 
    newWidth = newWidth*scale; 
    newHeight = newHeight*scale 
    $("#myPic").width(newWidth); 
    $("#myPic").height(newHeight); 
} 

Answer 4

Uso de anchura y max-anchura en la imagen tornillo hasta IE8.

Pon el ancho de tu imagen y envuélvela en un div que tenga el ancho máximo. (Luego maldice MS)

Answer 5

Contrariamente a la respuesta aceptada, puede hacerlo sin especificar el tamaño en el HTML. Todo se puede hacer en CSS:

#content img { 
    max-width: 100px; 
    width: 100%; 
    height: auto; 
} 

Answer 6

Aquí tiene cómo hacerlo sin Javascript. Establezca su max-width a la longitud que desee.

#content img { 
    max-width: 620px; 
    height: auto; 
} 

Esto funcionó para mí probado en un Mac con Firefox 28, Chrome y Safari 34 7 cuando tuve ningún ajuste de altura o anchura definida explícitamente en img etiquetas.

No establezca su ancho en CSS al 100% después de la configuración max-width como una persona sugirió porque entonces las imágenes que son más angostas que el ancho del contenedor (como íconos) serán voladas mucho más grandes que lo deseado.

Answer 7

que tenía que hacer esto con los siguientes requisitos:

1. Página no debe obtener reflown cuando la carga de imágenes. Los tamaños de imagen son conocidos en el lado del servidor y se pueden hacer cálculos.
2. imágenes deben escalar proporcionalmente
3. Las imágenes no deben ser más ancha que el elemento que contiene
4. Las imágenes no deben ser ampliados, solamente abajo cuando sea necesario
5. debe utilizar un elemento img y no un fondo para asegurarse de que las imágenes también imprime correctamente
6. ¡Sin JavaScript!

Lo más parecido que se me ocurrió es este terrible artilugio. Requiere tres elementos y dos estilos en línea, pero hasta donde yo sé, esta es la mejor manera de escalar proporcionalmente las imágenes. Todas las sugerencias de height: auto; aquí niegan el punto de especificar las dimensiones de la imagen en el lado del servidor y hacen que el contenido brinque durante la carga.

.image { 
    position: relative; 
} 

.image img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

<!-- container element with max-width prevents upscaling --> 
<div class="image" style="max-width: 640px;"> 
    <!-- div with padding equal to the image aspect ratio to make 
     the element the correct height --> 
    <div style="padding-top: 75%;"></div> 
    <!-- img scaled to completely fill container --> 
    <img src="//placebear.com/640/480" /> 
</div> 

https://jsfiddle.net/Lqg1fgry/6/ - El "Hola" está ahí para que pueda ver si el contenido después de la imagen salta alrededor.

Answer 8

es de esperar que no sea demasiado tarde, pero con esta falta de código logré obtener imágenes proporcionales en mi galería. tomará tiempo entender lo que está pasando, pero pruébalo y disfruta.

<style> 
div_base { 
    width: 200px; // whatever size you want as constrain unchangeable 
    max-width: 95%; // this is connected to img and mus exist 
} 
div_base img { 
    width: auto !important; // very important part just have it there! 
    height: 95%; // and this one is linked to maxW above. 
} 
</style>