कोई छवि (कंटेनर के बिना)

Question

नहीं है, मैं अपनी छवि को विस्तारित नहीं करना चाहता हूं और कोई स्क्रॉल बार नहीं चाहता हूं। तो जब ब्राउज़र विंडो कम हो जाती है तो छवि अभी भी एक ही आकार है (लेकिन अतिप्रवाह छिपा हुआ है)।

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

JsFiddle: http://jsfiddle.net/6ppL9axc/

मैं कंटेनर के साथ समाधान पाया, लेकिन मैं बिना एक समाधान की जरूरत है।

कोई विचार?

Answer 1

इस आजमाएँ:

img { 
 
    position: fixed; 
 
    overflow: auto; 
 
}

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

Answer 2

मैं एक पृष्ठभूमि संस्करण बनाया, आशा है कि यह मदद कर सकता है।

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

}

VH डिवाइस स्क्रीन ऊंचाई के सापेक्ष तो 60vh सब समय में स्क्रीन ऊंचाई 60% सापेक्ष हो जाएगा, कोई फर्क नहीं पड़ता जो डिवाइस :)

Answer 3

प्रयास करें है

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

यह स्क्रॉल बार हमेशा के लिए निष्क्रिय कर देगा ~

Answer 4

कोशिश इस
img {max-width:100%;}

Answer 5

इस नए सीएसएस संपत्ति object-fit (Currently webkit only, but soon to be supported in other browsers)

बस img पर object-fit: cover; सेट के साथ किया जा सकता है एक साथ एक अधिकतम-चौड़ाई और निश्चित ऊंचाई चौड़ाई।

यह मूल रूप से background-size:cover को पृष्ठभूमि छवि में लागू करने के बराबर है, सिवाय इसके कि हम इसे img तत्व पर लागू करते हैं।

FIDDLE

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

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