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

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

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

显示图像

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

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

拉伸但也会扭曲图像

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

纯HTML否

---

如果您知道图像的纵横比，就可以用JavaScript实现。虽然不知道通过JS是否可以，但是如果您同时使用任何其他语言，您可以将该值传递给JavaScript。

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


}

---

如果知道高度或宽度，则只能设置该值。其他尺寸将根据图像的纵横比自动设置。

如果要保留纵横比，只需指定一个尺寸，即：

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

函数getImgSize（id）{
var pic=document.getElementById（id）；
var h=pic.离视；
var w=pic.offsetWidth；
警报（'图像大小为'+w+'*'+h）；
}
纯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:



演示：
设置width=100%并不是一个很好的答案，因为它不考虑高度，可能会使元素在Y方向溢出窗口

此解决方案在加载和调整大小时调整图元的大小，检查窗口的纵横比，并确定高度应为100%还是宽度应为100%。这将始终保持窗口中的完整元素并使其最大化，同时保持纵横比

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

这个版本的@hfarazm代码在图片上做了一个div，图片在水平方向上以垂直方向居中，如果你水平方向上以垂直方向居中，我认为这是最好的方法，而不需要使用js（使用tommybananas代码，可以使它完全工作）或php或其他东西：
HTML

这可能会切断另一个轴上的图片。e、 g.对于AR 1:1窗口中AR 1:2的图像，使用“宽度=100%”，下半部分被切断。我如何将其放入调整大小处理程序中，如何获得窗口的大小？我最终说服了这些人，“宽度=100%”是“足够好的”。绝对不是通用的：不能制作太高或太宽的图像fit@stacker-显然，巴卡，这是不可能的，因为1 x 2000px不能容纳在这个空间中。此解决方案适用于存在正常纵横比差异的图像，不像我提到的那么多。
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();
});

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

.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;
}