如何仅显示将根据屏幕大小改变的宽图像的中心 [英] how to show only the centre of the wide image that will change according to the screen size

问题描述

<div style="width: 2911px height: 300px">
    <img style="float:left" src="../img/header1.jpg">
    <img style="float:left" src="../img/header2.jpg">
    <img style="float:left" src="../img/header3.jpg">
</div>

这三张图片总计为2911px。现在，例如当屏幕宽度为2000px时，我只想显示上面2911px的中心，如果它较小，我希望它变小，不用担心隐藏的图像右侧/左侧。我无法弄清楚如何做到这一点

these are three wide images summing up to 2911px. now for instance when the screen is 2000px wide I just want to show centre of the above 2911px and if its smaller i want it to be smaller and not worry about hidden right/left side of image. I cannot figure out how to do so

推荐答案

我已经为可能的解决方案创建了一个演示，请检查：

I have create a demo for you with a possible solution, check:

http://jsfiddle.net/lmgonzalves/ue49awaL/ 1 /

相关CSS代码：

Relevant CSS code:

div{
    width: 600px;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

img{
    float: left;
    width: 200px;
}

这篇关于如何仅显示将根据屏幕大小改变的宽图像的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！