Question

html图片宽度问题

图片宽度2000 高度350
放在div中, 如何根据div的宽度自动裁剪图片中间的部分
比如div宽度为1000
希望图片显示的地方是 左边裁掉500像素,右边裁掉500像素, 只显示中间的1000像素

Answer 1

嗯，这个好办！看代码!您只说了取宽度的中间哦，如果是垂直也要取中间，那您自己看看代码应该就会知道了哦。我加上注释

<div style="width:1000px; margin:0 auto; overflow:hidden;"><!-- 最外层的div,宽度为1000px,如果里面的内容超出1000，则自动隐藏超出的部分 -->
	<div style="position:relative; left:50%; top:auto;"><!-- 这个div相对左边50%定位 -->
    <img style=" width:2000px; height:350px; position:relative; left:-1000px; top:auto;" src="111.png" /><!-- 图片相对于左边-1000像素的位置定位。 -->
	</div>
</div>

追问

这个1000px只是相对浏览器的, 如果用户的分辨率宽度只有800px呢?
<img 这种方式如何动态固定?

追答

<div style="width:800px; margin:0 auto; overflow:hidden;"><!-- 最外层的div,宽度为800px,如果里面的内容超出800，则自动隐藏超出的部分 -->
    <div style="position:relative; left:50%; top:auto;"><!-- 这个div相对左边50%定位 -->
    <img style=" width:800px; height:350px; position:relative; left:-400px; top:auto;" src="111.png" /><!-- 图片相对于左边-400像素的位置定位。 -->
    </div>
</div>

老板，你没认真看代码哦，要学会自己思考！

无论是什么宽度的图片，都可以居中显示！认真看一下代码，认真思考！

Answer 2

用于图片过大然后图片居中使左右两边超出的不显示。
style="background:url('Chrysanthemum.jpg') no-repeat center top ;"

Answer 3

可以再div中添加一个img标签 img标签设置成1000像素的 然后将img的src设置成该图片 图片居中

Answer 4

方法1：
设置成背景，背景位置（background-position）设为居中
方法2：
div里面放img，div溢出（overflow）设为hidden，position设为relative，img的position为absolute，top、left为50%，margin-top为-175px，margin-left为-1000px。