有关图片的响应式显示

Question

1.现在有这么一个问题 假设有一张图片 它的长*宽是不确定的【由用户自己上传的】。想要在移动端实现图片超出屏幕的范围就取图片的中间部分。若未超出则取图片的原样。

Answer 1

把图片作为一个元素的background显示。给这个元素指定你想要的高宽，然后给background设定下面的size和position，它会尝试去显示整个图片，会自动等比缩放图片。

background-size: cover;
background-position: center center;

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

Answer 2

这种情况下必须要知道宽度，如果不能事先预知，可以在加载完图片后用 JS 获取到图片宽度。

<div class="container">
    <img src="xxx.jpg">
</div>

.container{
    overflow: hidden;
    position: relative;
}
.container img{
    position: relative;
    left: 50%;
    margin-left: -1000px; (左移一半宽度，这里假设图片总宽度是2000px)
}