आईएमजी टैग का उपयोग कर छवि के केवल एक हिस्से को कैसे दिखाया जाए?

Question

वर्तमान में, मेरे सभी छवियों इस तरह दिखेगा:

एचटीएमएल

<img class="photo" src="foo.png" /> 

सीएसएस

.photo { 
    padding: 3px; 
    border: 1px solid #000; 
    background: #fff; 
    width: 64px; 
    height: 64px; 
    display: block; 
} 

यह हमेशा के लिए छवि का पक्ष अनुपात की उम्मीद 1: 1 हो। अब, एक नई परियोजना आवश्यकता आई है कि छवियों को 1: 1 होना आवश्यक नहीं है। बल्कि, वे ऊँचे आयतों के हो सकते हैं:

यह कैसे एक साथ किया जा सकता:

इस मामले में, मैं केवल छवि के सर्वोच्च वर्ग प्रकट करने के लिए चाहते हैं एकल <img> टैग? मुझे पता है कि दो टैग के साथ इसे कैसे करें - img को div के साथ बस लपेटें, div पर 3px पैडिंग लागू करें और URL को के background-image के रूप में रखें। लेकिन मैं यह जानना चाहता हूं कि बिना किसी अतिरिक्त HTML टैग के क्लीनर तरीके से इसे कैसे किया जाए।

Answer 1

अंतिम अपडेट - परीक्षण किया IE8 +: This solution सीमा प्राप्त करने के लिए रूपरेखा का उपयोग करने का असली ड्रीम्स 'विचार के एक शोधन का उपयोग करता है। यह the linear-gradient method की तुलना में एक क्रॉस ब्राउज़र सादगी की अनुमति देता है जो मैं पहले जा रहा था। यह outline (असमर्थित) को छोड़कर, आईई 7 में काम करता है।

src के साथ इसे img टैग के रूप में रखते हुए इसे अर्थपूर्ण रखता है।

margin: 1px लेआउट में outline "स्पेस" देने के लिए लागू किया गया है, क्योंकि प्रकृति outline कोई स्थान नहीं लेता है। शून्य ऊंचाई मुख्य छवि को दबा देती है, और पैडिंग का उपयोग पृष्ठभूमि छवि के लिए वांछित ऊंचाई (जिसे मुख्य छवि के समान सेट किया जाता है) दिखाने के लिए किया जाता है।

एचटीएमएल

<img class="photo" src="foo.png" style="background-image: url(foo.png)" /> 

सीएसएस

.photo { 
    padding: 64px 0 0 0; 
    border: 3px solid #fff; 
    outline: 1px solid #000; 
    margin: 1px; 
    width: 64px; 
    height: 0px; 
    display: block; 
} 

Answer 2

clip संपत्ति पर नज़र डालें।

http://www.w3schools.com/cssref/pr_pos_clip.asp

यहाँ अपनी छवि के साथ एक उदाहरण: http://jsfiddle.net/2U3CE/1/

कोड:

img{ 
    position:absolute; 
    clip:rect(0,73px,73px,0); 
} 

Answer 3

उपयोग क्लिप

http://www.w3schools.com/cssref/pr_pos_clip.asp

Answer 4

मुझे लगता है कि आप कर रहे हैं एल सीएसएस के भीतर क्लिप संपत्ति के लिए ooking: - एक div असल

.photo-clipped { 
    position: absolute; 
    clip: rect(0px,64px,64px,0px); 
} 

<img src="some_image.gif" class="photo photo-clipped" /> 

Answer 5

, आपको एक टैग के साथ ऐसा कर सकते हैं। क्या इससे कोई फर्क पड़ता है कि यह एक आईएमजी टैग नहीं है?

<div style="display: inline-block; width: 50px; height: 50px; background: url(test.jpg);"></div> 

आप एक <img> टैग कभी नहीं का उपयोग करें, तो आप सिर्फ div की स्थापना की और बस हो गया। आकार सेट करें, पैडिंग, सीमा, आदि जोड़ें, और सभी पुन: प्रयोज्य शैलियों को कक्षा में रखें और पृष्ठभूमि छवि को प्रति div आधार पर सेट करें। आप इस के साथ अंत:

<div class="hip2bsquare" style="background: url(test.jpg);"></div> 

सीएसएस:

.hip2bsquare { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    border: 3px solid #FFF; 
    outline: 1px solid #000; 
} 

यह सफेद जोड़ें और काला जोड़ने के लिए रूपरेखा तैयार करने की सीमा का उपयोग करता है। यह शायद बॉक्स मॉडल का दुरुपयोग है, लेकिन यह आपको दृश्य देना चाहिए।