如何在保持圖像寬高比的同時(shí)拉伸圖像以填充<div>？我需要將此圖像拉伸到可能的最大尺寸，而不會(huì)溢出<div>或傾斜圖像。我無法預(yù)測圖像的寬高比，因此無法知道是否使用：<img src="url" style="width: 100%;">要么<img src="url" style="height: 100%;">我不能同時(shí)使用兩者（即style =“width：100％; height：100％;”）因?yàn)檫@將拉伸圖像以適應(yīng)<div>。該<div>具有的大小為屏幕，這也是不可預(yù)測的百分比來設(shè)置。
3 回答
慕沐林林
TA貢獻(xiàn)2016條經(jīng)驗(yàn) 獲得超9個(gè)贊
只使用CSS和更簡單的方法HTML：
HTML：
<div class="fill"></div>
CSS：
.fill {
overflow: hidden;
background-size: cover;
background-position: center;
background-image: url('path/to/image.jpg');}這會(huì)將您的圖像作為背景，并將其拉伸以適應(yīng)div大小而不會(huì)失真。
一只萌萌小番薯
TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊
不是一個(gè)完美的解決方案，但這個(gè)CSS可能有所幫助 縮放是使這個(gè)代碼工作的原因，理論上理論上這個(gè)因素對于小圖像來說理想上是理想的 - 但在大多數(shù)情況下，2,4或8可以正常工作。
#myImage {
zoom: 2; //increase if you have very small images display: block;
margin: auto;
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;}添加回答
舉報(bào)
0/150
提交
取消