關于如何解決img標簽中圖片超出盒子div范圍的討論
1.img標簽
必要屬性有兩個src,alt
<img src="url" alt="text">執行此代碼由于url未給值，圖片不顯示，由alt定義
<img src="./image/22.jpg" alt="text">執行此代碼由于url已給，圖片顯示，由alt不顯示
<img width="100px" height="200px" src="./image/22.jpg" alt="text">執行此代碼，可以看到給定寬100，高200，如圖，圖片失真
要解決這個只需要點開圖片，右鍵——>調整大小就可以得到這張圖片的寬度和高度
當然直接查看屬性也可
得到這個寬度比就很好辦辦了,如圖只要等比例放大或者縮小寬高圖片就不會扁
<img width="100px" height="200px" src="./image/22.jpg" alt="text">
<img width="424px" height="400px" src="./image/22.jpg" alt="text">
<img width="106px" height="100px" src="./image/22.jpg" alt="text">
2.div盒子
首先我們不對這個盒子做任何改動只命名，可以看到這張圖片很大，且真正要集中顯示的是中間部分
<div id="photo">
<img src="./image/mi4.jpg">
</div>
我們先嘗試在img標簽中等比例縮小，可以看到效果很明顯縮小了，但是兩邊多余的部分依舊還在
<div id="photo">
<img width="224px" height="55px" src="./image/mi4.jpg">
</div>
我們現在對盒子進行定義，可以看到圖片這樣放是不合適的
#photo{
width: 600px;
height: 400px;
margin: 10px 100px auto 100px;
background-color: #544;
}
我們現在通過對img標簽進行調整，可以看到效果差強人意
<img width="896px" height="220px" src="./image/mi4.jpg">
既然對img標簽調整沒有用，我們對盒子進行調整，此時我們要引入overflow
資料自查哦
現在進行設定hidden,可以看到超出的地方已經隱藏掉了，但是主體內容依舊沒有完美顯示
#photo{
width: 600px;
height: 400px;
margin: 10px 100px auto 100px;
background-color: #544;
overflow: hidden;
} 
現在設定auto,可以看到多了滾動條，可以通過拖動顯示完美，但是滾動條很難看
#photo{
width: 600px;
height: 400px;
margin: 10px 100px auto 100px;
background-color: #544;
overflow: auto;
}
3.我的想法
我們只需要將img中的圖片設為背景圖，然后利用background-size和background-position進行調整
我們先將background-position設定為center居中，不對background-size進行額外設定，可以看到離成功不遠了
width: 600px;
height: 400px;
margin: 10px 100px auto 100px;
background-color: #544;
background-image: url(./image/mi4.jpg);
background-size: ;
background-position: center;
那么我們調整background-size，可以看到圖片是作為背景融入了我們的盒子，但是圖片扭曲了很多
width: 600px;
height: 400px;
margin: 10px 100px auto 100px;
background-color: #544;
background-image: url(./image/mi4.jpg);
background-size:600px 400px ;
background-position: center;
4.解決方法
修圖，哈哈哈，我們只要截取圖片中需要的部分，
將多余部分截取掉之后，讓盒子和我們圖片的寬：高相等即可
5.疑問
搞了很久發現要通過調整盒子屬性來使圖片水平居中顯示并隱藏多余部分很難實作，如果大家有不需要修圖就可以搞定的方法請一定教給我，謝謝，歡迎大家評論區一起交流討論
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/280710.html
標籤：其他