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

如果您知道高度或宽度，则只能设置它。另一个尺寸将根据图像的纵横比自动设置。

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


}

Answer 4

设置宽度= 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 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

这个版本的@hfarazm代码制作了一个div，其中pic是在水平居中的全顶视图上，如果你将它全局水平放置它将是垂直居中的，我认为它是不使用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 7

纯HTML没有。

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

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

7 个答案: