HTML：以非固定大小居中放置圖像

我想在html中做一個簡單的事情，但是沒有找到解決方案。也許你可以幫助我。HTML：以非固定大小居中放置圖像

我有一個空的網站（），並希望在頁面中間放置一個圖像（垂直和水平）。那裏有很多解決方案，通過圖像大小來計算位置。問題是，我想讓圖像的大小取決於本地屏幕分辨率。

圖片應該始終填充屏幕寬度的70％，高度應該保持成比例。即使用戶調整瀏覽器窗口大小。

最好是使用div和css的解決方案，但如果需要，表格和html格式化也可以。

2013-07-26 user2623615

你可以有圖像位置的絕對？因爲它的動態圖像大小，你需要一些jQuery的幫助。到具有圖像正常調整大小：

img { 
    display: block; 
    height: auto; 
    margin: 0 auto; 
    width: 70%; 
}

使用jQuery：

$(document).ready(function() { 
    img_adjust($('img')); 

    $(window).resize(function() { 
     img_adjust($('img')); 
    }); 
}); 

function img_adjust(image_obj) { 
    var window_height = $(window).height(); 
    var image_height = image_obj.outerHeight(); 
    var margin_top = (window_height - image_height)/2; 

    image_obj.css('margin-top', margin_top + 'px'); 
}

以下是在動作一個例子：http://jsfiddle.net/b4ttq/

來源

2013-07-26 17:14:26 jerrylow

-1

取70％的寬度的一個div，餘量左15％！那集中你的容器.. 相應地做相同的高度！適應圖像大小給予一個CSS img {max-width:100%; height:auto;} 應該這樣做..

來源

2013-07-26 17:14:40 Arni

如果你不需要任何JavaScript做它在所有的，那麼你將無法垂直居中的形象，你真的不能。這是我能想出的最好的純html-css解決方案。下面的代碼會將圖像的大小按比例調整爲70％的寬度，高度，並將圖像從頂部設置爲30％;
HTML：

<div id='block'>&nbsp;</div> 
<div id='pic'> 
    <img id='img' src='https://www.google.com/images/srpr/logo4w.png' /> 
</div>

CSS：

#block{ 
     height:30%; 
     display: block; 
    } 
    #pic{ 
     display: block; 
     width: 70%; 
     margin-left: auto; 
     margin-top: auto; 
    } 
    #img{ 
     width: 70%; 
    }

來源

2013-07-26 19:34:56 Optox

HTML：以非固定大小居中放置圖像

回答

相關問題