如何在不拉伸的情況下爲圖像賦予高度

我有一張具有非常高分辨率的圖像。我將寬度設置爲100％，它工作正常。唯一的問題是，身高太大，我無法在不拉伸圖像的情況下給予身高。如何在不拉伸的情況下爲圖像賦予高度

這裏我的HTML：

<div class="container"> 
    <div class="image"> 
    <img src="Post1.jpg" alt=""> 
    </div> 
</div>

CSS：

.div{ 
    max-height:500px 
} 
img{ 
    width:100%; 
    height:auto; 
    max-height:100%; 
}

我怎麼可以給它適當的高度，而不會伸展的形象呢？

來源

2016-08-14 Wosley Alarico

放'width'和'height'汽車會做的工作！ – Smit

在哪裏精確？我只是嘗試過，並沒有真正的工作。你能告訴我一個例子嗎？ –

看到我的答案.. – Smit

你可以嘗試這個..添加圖像，而不是內部div，如果你必須給寬度100％。

.sq1 { 
 
    height : 300px;width:300px; 
 
    background-color:#eee;position:fixed; 
 
} 
 

 
.sq2{ 
 
    height:200px;width:200px; 
 
    background-color:#000;margin:50px auto; 
 
}

<div class="sq1"> 
 
    <div class="sq2"></div> 
 
</div>

來源

2016-08-14 13:07:03

/* css */ 
    div{ 
     height:500px; 
     width: 100%; 
    } 
    img{ 
     width: auto; 
     height: auto; 
    } 

<!-- HTML --> 
<div class="container"> 
    <div class="image"> 
    <img src="Post1.jpg" alt=""> 
    </div> 
</div>

來源

2016-08-14 13:11:00 Smit

我試過這段代碼，圖像仍然是默認的高度（太大）。 –

我已更新我的代碼，試用一下。另一方面，@WosleyAlarico可以嘗試根據您的需要更改「高度」 – Smit

好了，有你的代碼中的幾個漏洞。

.div選擇器選擇任何class =「div」的東西。您想使用.container選擇器
您忘記關閉max-height：500px with a;
最後回答你的問題：你的圖像仍然以原始大小顯示。這是因爲你沒有設置溢出：隱藏;通過添加此行，圖像不會顯示在.container div之外。

我試圖儘可能貼近原帖。請記住，您正在剪切可能導致不良結果的圖像部分。

HTML

<div class="container"> 
    <div class="image"> 
    <img src="Post1.jpg" alt=""> 
    </div> 
</div>

CSS

.container{ 
    max-height:500px; 
    overflow: hidden; 
} 
img{ 
    width:100%; 
}

來源

2016-08-14 14:31:01 RMo

這不是真的，因爲隱藏了圖像內容。目標是能夠在不拉伸圖像或隱藏任何內容的情況下降低高度。 –

如果你想保持一個特定的寬度。沒有辦法改變圖像而沒有拉伸或切斷某些部分。非常合乎邏輯，因爲這在現實生活中根本不可能。然而，你可以做一些與背景大小相似的東西：包含;。 http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain假設你不介意圖像兩側的空白空間（從而改變寬度）。 – RMo

@ RMo.Thanks。然後將裁剪圖像。因爲它的滑塊不能放在背景上。 –

如何在不拉伸的情況下爲圖像賦予高度

回答

相關問題