HTML / IE: растянуть изображение до размеров, сохранить соотношение сторон

Question

В окне HTML я устанавливаю собственное тело

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

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

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

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

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

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

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

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

Answer 3

Настройка width = 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 4

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

Ой, и ему нужен 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 5

эта версия кода @hfarazm делает div в котором картинка имеет полный размер вершины, центрированный по горизонтали, если вы сделаете его полноразмерным по горизонтали, он будет центрирован по вертикали, я думаю, что это лучший способ без использования 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/

Answer 6

чисто 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>

ДЕМО: http://jsfiddle.net/PBbcF/

Answer 7

чистого HTML нет.

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