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:
080b747a20f9163200dd0a7d304ba388
336c8a3b1453ec896bbdf1530aa8dd00
531ac245ce3e4fe3d50054a55f265927

3c267ed683da07f8c7ff91f4f91d8ed6a90657b8ce7dd20bdd927fd512e664ba16b28748ea4df4d9c2150843fecfba68
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.