HTML/IE: растянуть изображение, чтобы соответствовать, сохранить пропорции

Question

В окне HTML, я устанавливаю пользовательских тела

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

для отображения изображения.

Теперь я хочу отредактировать изображение, чтобы оно соответствовало доступному окну, но сохраняйте пропорции.

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

растягивается, но также искажает изображение.

Есть ли какой-то HTML-обман для этого? IE только решение в порядке, так как это находится в размещенном контролером бруцеров.

Answer 1

Если вы хотите сохранить пропорции, вам нужно только указать одно измерение, а именно:

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

Вы можете использовать JavaScript, чтобы определить максимальный размер и размер соответственно

<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

Чистый HTML-код.

Это может быть сделано на JavaScript, если вы знаете соотношение сторон изображения. Не знаю, возможно ли это через JS, но вы можете передать это значение JavaScript, если вы используете какой-либо другой язык.

Answer 3

Нет, вам придётся использовать Javascript для этого, и это сложнее, чем кажется. Я сделал что-то подобное на прошлой неделе, здесь, S функция я создал для него, вы можете быть в состоянии восстановить соответствующий его

О, и она нуждается в 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

Если вы знаете, либо высоту или ширину, вы можете установить только это. Другое измерение будет автоматически установлено на основе соотношения сторон изображения.

Answer 5

чистый HTML решение: это моя техника.

.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

ширина Настройка = 100% не совсем большой ответ, потому что он не учитывает высоту и может перелиться элемента в Y от окна.

Это решение изменяет размер элемента один раз при загрузке, а также при изменении размера, проверяет соотношение сторон окна и определяет, должна ли высота быть 100% или ширина 100%. Это всегда будет удерживать FULL-элемент в окне и максимизироваться при сохранении пропорций.

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

эта версия @hfarazm кода делает ДИВ в Wich ПОС на полном размере верт горизонтально по центру, если вы сделаете это полный размер по горизонтали он будет вертикально по центру, я думаю, что его лучший способ без использования JS (с кодом tommybananas это может быть возможным, чтобы сделать его полностью работать) или PHP или что-то другое: 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/