容器中的拉伸圖像

每當我將文件上傳到此容器中時，它將拉伸圖像....我如何獲取它，因此它只是居中圖像，但不會拉伸，而且容器保持相同大小？容器中的拉伸圖像

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<img id="blah2" alt="Your Pixboard Image Here" width="196" height="296" /> 

<input type="file" 
    onchange="$('#blah2')[0].src = window.URL.createObjectURL(this.files[0])">

來源

2015-11-30 George Gibson

你們定義的高度和寬度將延伸任何不是196 x 296，如果你只是定義一個（即只有身高）？ – ggdx

您可以使用CSS background-position和background-cover屬性來實現這一

FIDDLE

你的HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<div id="blah2">Your pixelboard image here</div> 

<input type="file" 
    onchange="$('#blah2').css('background-image', 'url('+window.URL.createObjectURL(this.files[0])+')')">

和CSS

#blah2 { 
    width:196px; 
    height:296px; 
    background-image: url('path/to/image'); 
    background-position: center; 
    background-size: cover; 
}

來源

2015-11-30 12:13:18 abhishekkannojia

謝謝！這已經奏效了！ –

不要設置圖像

<img id="blah2" alt="Your Pixboard Image Here" width="196" /> 檢查的高度此link

來源

2015-11-30 12:11:14 WisdmLabs

他需要他的形象留在容器中。有了這個解決方案，如果你有一個「高但薄」的圖像，將破壞佈局。 –

定義您的影像max-width和max-height而不是寬度和高度。這樣你的圖片將被縮小到留在你的盒子裏。

來源

2015-11-30 12:11:38

容器中的拉伸圖像

回答

相關問題