The image width exceeds the div, css controls the image to be displayed in the center without changing the original size, and the part of the image beyond the div is hidden_html/css_WEB-ITnose

The code is as follows:

The requirements are as in the title
The explanation is as follows
Figure 1 below is the effect without adding pictures, Figure 2 is the effect with adding pictures. Picture 3 is the original picture Picture 4 is the desired effect, please help me, thank you



Picture 1


Picture 2


Figure 3



Figure 4

Reply to the discussion ( Solution)

Your needs are very strange. If you want the effect of Figure 4 (that is, the height of the picture is not fully displayed), the following code can satisfy it.

#tt {background-color:#FF0000;margin: auto;width: 100%;height:400px;overflow: hidden;   /* 添加的 */}

Under normal circumstances, this is the requirement. The width should adapt to the screen, no scroll bar in the horizontal direction will appear, and the height will change proportionally with the width, that is, the width and height of the picture will change proportionally. , you can do this:

#tt .img {width: 100%;}

My post may not express my needs clearly. For example, the width of an img inside a div in an active page is 1920. The requirement is that the resolution of my browser is 1024 Then the img will display the width of 1024 in the center, and hide the parts beyond the range. If the browser resolution is 1400, then the img will display the width of 1400 in the center, and the parts beyond the both sides will be hidden.

You have to write jquery for this, get the width of that div, assign this width value to img, add overflow: hidden in img in css; just for the score

The master upstairs has the code without.

I happen to have the code here, contact me, privately message me in my mailbox, and send it to you

<style>#tt {  background-color:#FF0000;  width: 100%;  height:500px;  overflow: hidden;}#tt .img{  width:1920px;  margin:0 calc(50% - 960px);}</style><div id="tt"><img src="http://b.zol-img.com.cn/desk/bizhi/image/5/1920x1080/1418984437613.jpg" class="img"/></div>

You can change your mind and don’t put the picture in In a div, as the background image of the div, you can use background-size:cover to achieve absolute centering. This can also get rid of the restriction that the width and height of the div need to be readjusted

Will the size of your image remain the same? If img is set to 100%, it will always change with the width of the outer div, which is a centered effect. If the width of your image remains unchanged at 1920px, the method above is feasible, which is to make it a background image.