首頁猿問網頁中的圖片高度（不能被壓縮拉伸）...

網頁中的圖片高度（不能被壓縮拉伸）自適應瀏覽器窗口高度，寬度相應的進行兩邊裁剪，請這個效果怎么寫？

Html/CSS JavaScript

慕田峪8701529 2017-07-31 10:42:27

查看完整描述

3 回答

業余奶茶品鑒師

TA貢獻260條經驗獲得超388個贊

背景圖片 no-reapt center top，用js 獲取屏幕高度，賦給這個di，就可以了

1 反對回復 2017-07-31

WingMeng

TA貢獻32條經驗獲得超13個贊

補充一種方法：

<div?class="box">&nbsp;</div>

然后 CSS 部分：

.box?{
????line-height:?1;
????font-size:?10em;??/*?圖片高度?*/
????border:?1px?solid?#ccc;
????background:?url(xxx.jpg)?center?no-repeat;??/*?圖片?*/
}

反對回復 2017-07-31

一諾yinol

TA貢獻27條經驗獲得超4個贊

直接同css寫就行了，

? ?width:?100%;

? ?padding-top:?14%; ?/* 寬除以高的比例 */

? ?height:?0;

? ?position:?relative;

? ?background:?url(img/**.jpg) no-repeat center center;

? ?background-size:?100%;

反對回復 2017-07-31

關注