HTML/IE: Imagen alargar a medida, preservar la relación de aspecto

Question

En una ventana HTML, yo soy la creación de un cuerpo a medida

<img src="file://[filename]"> 

para mostrar una imagen.

Ahora quiero ajustar la imagen para que se ajuste a la ventana disponible, pero conservar la relación de aspecto.

<img src="file://[filename]" width="100%" height="100"> 

estira pero también distorsiona la imagen.

¿Hay algún truco HTML para hacer eso? La única solución de IE está bien, ya que está en un control de navegador alojado.

Answer 1

Si desea conservar la relación de aspecto, es necesario que especifique una dimensión es decir:

<img src="file://[filename]" width="100%" alt="" /> 

Puede usar javascript para determinar la dimensión máxima y cambiar el tamaño en consecuencia

<script type="text/javascript"> 
function getImgSize(id){ 
var pic = document.getElementById(id); 
var h = pic.offsetHeight; 
var w = pic.offsetWidth; 
alert ('The image size is '+w+'*'+h); 
} 
</script> 

Answer 2

Pure HTML no.

Esto podría hacerse en JavaScript si conoce la relación de aspecto de la imagen. Sin embargo, no sé si eso es posible a través de JS, pero podría pasar ese valor a JavaScript si también está utilizando otro idioma.

Answer 3

No, vas a tener que usar Javascript para esto, y es más complicado de lo que parece. Hice algo similar la otra semana, aquí; s la función que he creado para él, es posible que pueda volver a apropiarse de él

Ah, y que precisa de jQuery

function resize_background(){ 

    var target = $("#background_image"); 
    var window = $(window); 
    var ratio = 1; 
    var anchor_point = 200; 
    var register_point = 400; 

    if(window.width() > min_width){ 
     ratio = window.width()/min_width; 
     target.css("marginLeft", 0); 
    }else{ 
     // center to screen 
     // For this project, this aint needed. 
     //var left_margin = (window.width()/2) - (min_width/2); 
     //target.css("marginLeft", left_margin); 
    } 

    // now figure out anchor stuff 
    var top = ((register_point * ratio) - anchor_point) * -1; 

    target.width(min_width * ratio); 
    target.height(min_height * ratio); 
    target.css("marginTop", top); 

    $("#trace").text(top); 


} 

Answer 4

Si conoce bien la altura o ancho, puede establecer solo eso. La otra dimensión se establecerá automáticamente en función de la relación de aspecto de la imagen.

Answer 5

solución HTML puro: esta es mi técnica

.iCon { 
    height: 267px; 
    width: 520px; 
    background-color: #0F3; 
    overflow: hidden; 
    } 
.iCon img { 
    margin-right: auto; 
    margin-left: auto; 
    height: 350px; 
    text-align: center; 
    display: table-cell; 
    margin-top: -50px; 
    } 

HTML:

<div class="iCon"> 
    <img src="http://media.caranddriver.com/images/13q2/510832/2014-ford-fiesta-16l-sedan-hatchback-first-drive-review-car-and-driver-photo-523592-s-450x274-1.jpg"> 
</div> 

DEMO: http://jsfiddle.net/PBbcF/

Answer 6

ancho de ajuste = 100% no es exactamente una gran respuesta, ya que no tiene en cuenta la altura y podría desbordar el elemento de la Dirección Y fuera de la ventana.

Esta solución cambia el tamaño del elemento una vez en carga y también en el tamaño, verificando la relación de aspecto de la ventana y determinando si la altura debe ser del 100% o el ancho debe ser del 100%. Esto mantendrá siempre el elemento FULL en la ventana y se maximizará al tiempo que se conserva la relación de aspecto.

function changeElementSize(){ 
    // Compare your element's aspect ratio with window's aspect ratio 
    // My element was 100w x 80h so mine was 1.25 
    if (window.innerWidth/window.innerHeight > 1.25){ 
     $('#element').css('height','100%'); 
     $('#element').css('width','auto'); 
    } else { 
     $('#element').css('width','100%'); 
     $('#element').css('height','auto'); 
    } 
} 

$(window).resize(function() { 
    changeElementSize(); 
}); 

$(window).load(function() { 
    changeElementSize(); 
}); 

Answer 7

esta versión del código @hfarazm hace un div en wich la foto es de tamaño completo vert centrado horizontalmente, si lo haces a tamaño completo horizontal que se centra verticalmente, creo que es la mejor manera sin usar js (con tommybananas código puede ser posible para hacer que funcione por completo) o PHP o alguna otra cosa: HTML

<div class="centeredImage"> 
    <img src="http://media.caranddriver.com/images/13q2/510832/2014-ford-fiesta-16l-sedan-hatchback-first-drive-review-car-and-driver-photo-523592-s-450x274-1.jpg"> 
</div> 

CSS

.centeredImage { 
    height: 500px; 
    width: 500px; 
    background: rgba(0,0,0,0.0); 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.centeredImage img { 
    margin: auto; 
    width: 500px; 
} 

http://jsfiddle.net/5p0ugfLw/