首页猿问网页中的图片高度（不能被压缩拉伸）...

网页中的图片高度（不能被压缩拉伸）自适应浏览器窗口高度，宽度相应的进行两边裁剪，请这个效果怎么写？

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

关注