HTML/IE：拉伸图像以适应，保持纵横比答案

【问题标题】：HTML/IE: stretch image to fit, preserve aspect ratioHTML/IE：拉伸图像以适应，保持纵横比
【发布时间】：2010-10-13 05:04:18
【问题描述】：

在 HTML 窗口中，我正在设置自定义正文

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

显示图像。

现在我想拉伸图像以适应可用窗口，但保留纵横比。

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

拉伸但也扭曲图像。

是否有一些 HTML 技巧可以做到这一点？仅 IE 的解决方案很好，因为这是在托管的浏览器控件中。

【问题讨论】：

标签： html internet-explorer

【解决方案1】：

这个版本的@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/

【讨论】：

【解决方案2】：

设置 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();
});

【讨论】：

【解决方案3】：

纯 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/

【讨论】：

绝对不通用：不能让太高或太宽的图像适合
@stacker-baka 显然，这是不可能的，因为 1 x 2000px 无法容纳在其中。此解决方案适用于存在正常纵横比差异的图像，没有我提到的那么多。

【解决方案4】：

如果要保持纵横比，只需要指定一维即：

<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>

【讨论】：

如何将其放入调整大小处理程序中，如何获得窗口的大小？
我最终说服了这些家伙“width="100%"”“足够好”。

【解决方案5】：

如果您知道高度或宽度，则只能设置它。其他尺寸会根据图片的纵横比自动设置。

【讨论】：

这可能会切断另一轴的图片。例如对于在 AR 1:1 窗口中具有 AR 1:2 的图像具有“width=100%”´，下半部分被切断。

【解决方案6】：

不，您将不得不为此使用 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);


}

【讨论】：

【解决方案7】：

纯 HTML 没有。

如果您知道图像的纵横比，这可以在 JavaScript 中完成。不知道这是否可以通过 JS 实现，但如果您也使用任何其他语言，也可以将该值传递给 JavaScript。

【讨论】：