javascript - 将图像比例调整为浏览器大小的算法

Question

<分区>

Answer 1

你在找类似 this 的东西吗？ ？

html:

full image:<br/>
<img src="http://lorempixel.com/400/200"></img><br/>
smaller, centered image:<br/>
<div class="container"><img src="http://lorempixel.com/400/200"></img></div>

CSS:

.container{
    width: 200px;
    height: 150px;
    text-align: center;
    overflow: hidden;
}

.container img{
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

css可以实现很多，你不必总是去寻找js。如果要更改图像，只需将 margin-left/margin-top 属性更改为图像宽度/高度的一半即可。