imagebox在HTML自動定向圖像

我有這個imagebox將顯示用戶上傳的圖片：因爲我想imagebox到其autoAdjust圖像時，它不是在一個1x1尺寸imagebox在HTML自動定向圖像

<img src = "./imgs/..imagenamehere..." style = "background-size:cover; width:357px; height:357px;"

我把background-size:cover有所以它不會拉伸圖像，也不會增加圖像盒的尺寸。

但是，當顯示長長的肖像圖像時，圖像盒會自動定向圖像，使圖像看起來像是站在圖像上而不是原始肖像位置。

有什麼辦法解決這個問題嗎？

來源

2017-04-27 Dranreb

例如，你想要的是object-fit CSS屬性，家飯店沒有支持IE and Edge：

img { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #dedede; 
 
} 
 
.contain { 
 
    object-fit: contain; 
 
} 
 
.cover { 
 
    object-fit: cover; 
 
}

<img src="http://lorempixel.com/100/300" class="contain"> 
 
<img src="http://lorempixel.com/100/300" class="cover">

來源

2017-04-27 07:25:35 Kaiido

不錯的選擇圖片 –

@MaheshSuthar它隨機挑選。 – Kaiido

非常感謝！這是我一直在尋找的！上帝保佑！ – Dranreb

background-size:cover;

僅用於，如名稱所示，背景圖像。下面

div { 
 
    height:200px; 
 
    width: 200px; 
 
    background-image: url("http://placehold.it/350x150"); 
 
    background-repeat: no-repeat; 
 
    background-size:cover; 
 
    background-position: 50% 50%; 
 
}

<div></div>

來源

2017-04-27 07:20:25 RacoonOnMoon

在此代碼正在添加和圖像，但你不在其上應用CSS。您正在背景圖片上應用CSS。

使用這種代碼在你的CSS，而不是

background-image : url (' < Path of image you want to show > '); 
background-size : contain; <!-- You can use 'cover' also but see what you want it to look like -->

如果你，如果你的形象是不是有合適的寬高比，然後它會被放大到覆蓋所有你在哪裏顯示它的使用面積background-size : cover;然後，和如果您使用background-size : contain;，那麼它會在該區域顯示您的圖像，並且該圖像的高度和寬度都可以適合其內部的最大可能尺寸。如果您有任何疑問，然後評論

來源

2017-04-27 07:27:14

imagebox在HTML自動定向圖像

回答

相關問題