讓圖像（沒有容器）不被拉伸

我希望我的圖像不被拉伸並且沒有滾動條。所以當瀏覽器窗口縮小時，圖像仍然是相同的大小（但隱藏溢出）。讓圖像（沒有容器）不被拉伸

<img src="http://nybbledesigns.com/images/header.jpg"/>

我發現集裝箱解決方案，但我需要沒辦法解決。

有什麼想法？

2014-09-21 Bronzato

你可以把溢出的身體，但我不認爲這是一廂情願。或者你可以將圖像設置爲身體的背景。否則，我認爲你堅持容器解決方案。 – LinkinTED 2014-09-21 09:45:07

我更喜歡在img標籤中保留我的圖片 – Bronzato 2014-09-21 09:45:44

據我所知，您需要一個包裝元素。 – LinkinTED 2014-09-21 09:52:37

試試這個：

img { 
 
    position: fixed; 
 
    overflow: auto; 
 
}

<img src="http://nybbledesigns.com/images/header.jpg"/>

2014-09-21 09:51:51 SuperDJ

這個解決方案的問題是，圖像是固定的，然後當我向下滾動，圖像不滾動頁面... – Bronzato 2014-09-21 09:55:55

@Bronzato我知道，但這個要求是不是在棘手的問題; P – SuperDJ 2014-09-21 09:59:36

我做了一個背景版本，希望能有所幫助。

<div></div> 
div { 
width:100%;height:60vh; 
background-image:url("http://nybbledesigns.com/images/header.jpg"); 
background-repeat:no-repeat;

}

所述VH是相對於設備的屏幕高度，以便60vh將相對於屏幕的高度在所有時間的60％，無論哪個設備:)

2014-11-05 17:50:12

嘗試

html, body { 
    max-width: 100%; 
    overflow-x: hidden; 
}

它將永遠禁用滾動條〜

2014-11-05 18:37:01

試試這個
img {max-width:100%;}

2015-01-12 07:53:13 kukukukikii

在img只需設置object-fit: cover;一起做一個寬度最大寬度和高度固定。

這基本上相當於將background-size:cover應用於背景圖像，除了這裏我們將其應用於img元素。

body { 
 
    margin: 0; 
 
} 
 
img { 
 
    object-fit: cover; 
 
    max-width: 100%; 
 
    height: 513px; 
 
}

<img src="http://nybbledesigns.com/images/header.jpg" />

2015-01-12 08:04:29 Danield

回答