我怎樣才能插入不同大小的圖像框中心? 圖片有不同的大小。 縱向(高度比寬度大), 橫向(寬度比高度大), 方(寬度是相同的高度) 和紅色箱具有可轉換的大小。(不僅正方形)我如何在盒子的中心插入不同大小的圖像?
我用這樣的代碼
HTML
<div class="image">
<img class="image_insert" src="..">
</div>
CSS
.image{
position:relative;
width:100px;
height:100px;
overflow:hidden;
}
.image_insert{
max-width:100%;
position:absolute;
margin:auto;
left:50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform:translateX(-50%);
top:0;
bottom:0;
}
的JavaScript
function imageControl(){
var image = document.getElementsByClassName('image_insert');
var array = new Array();
for(var i=0; i<image.length; i++){
if(image[i].width>image[i].height){
$(image[i]).css("max-width","none");
$(image[i]).css("height","100%");
}
}
}
它的工作。但這種方式取決於文檔(圖像,JavaScript)的加載時間,所以有什麼最好的方式來插入不同大小的圖像在盒子的中心? *內部沒有空白的紅色框!
看到這一點,會幫助你http://jsfiddle.net/ marvo/3k3CC/2/ – user7357089
那麼你想要隱藏邊界的外部圖像? – aavrug