html固定单元格纵横比,HTML / IE：拉伸图像以适应，保持纵横比

7 个答案:

答案 0 :(得分：10)

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

您可以使用javascript确定最大尺寸并相应调整大小

function getImgSize(id){

var pic = document.getElementById(id);

var h = pic.offsetHeight;

var w = pic.offsetWidth;

alert ('The image size is '+w+'*'+h);

}

答案 1 :(得分：5)

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

答案 2 :(得分：2)

设置宽度= 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 :(得分：2)

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

}

答案 4 :(得分：1)

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

答案 5 :(得分：1)

这个版本的@hfarazm代码制作了一个div，其中pic是在水平居中的全顶视图上，如果你将它全局水平放置它将是垂直居中的，我认为它是不使用js的最好方法(使用tommybananas代码它可能使它完全工作)或PHP或其他东西：

HTML

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;

}

答案 6 :(得分：0)

纯HTML没有。

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