HTML/IE: 拉伸图片以适应大小，保持宽高比

Question

在一个HTML窗口中，我正在设置自定义的正文。

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

显示图片。

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

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

图片的拉伸会导致图像变形。

有没有一些HTML技巧可以解决这个问题？只在IE浏览器中实现也可以，因为这是在托管的浏览器控件中。

- peterchen

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>

- Philippe

---

我该如何将其放入调整大小的处理程序中，以及如何获取窗口的尺寸？ - peterchen

我最终说服了大家，"width="100%"" 是“足够好”的。 - peterchen

Answer 2

如果您知道图片的高度或宽度，您只需要设置其中一个。另一个维度将根据图像的纵横比自动设置。

- tgecho

---

这可能会在另一个轴上切断图片。例如，在宽高比为1:1的窗口中，对于宽高比为1:2的图像使用“width=100%”，则会切掉下半部分。 - peterchen

Answer 3

不行，你需要使用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);


}

- gargantaun

Answer 4

这个版本的@hfarazm代码创建了一个div，其中图片在垂直方向上是全尺寸且水平居中的。如果您使其在水平方向上全尺寸，则会垂直居中。我认为这是最好的方法，而不使用js（使用Tommybananas的代码可能完全可行）或php或其他东西：

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

- Tayou

Answer 5

将宽度设置为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();
});

- tommybananas

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/

- hfarazm

---

绝对不是通用的：无法使过高或过宽的图像适合。 - stacker-baka

@stacker-baka 显然，这是不可能的，因为1 x 2000px无法容纳此内容。这个解决方案适用于图像，其中存在正常的宽高比差异，而不是像我所提到的那样大。 - hfarazm

Answer 7

这是纯HTML，没有使用JavaScript。

如果您知道图像的纵横比，可以通过JavaScript完成。不过我不确定是否可以通过JS实现，但是如果您还使用其他语言，可以将该值传递给JavaScript。

- Ólafur Waage