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。

總結

以上是生活随笔為你收集整理的html固定单元格纵横比,HTML / IE：拉伸图像以适应，保持纵横比的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。