मेरे पास overflow: hidden;
के साथ एक छोटे कंटेनर के अंदर एक लंबा छवि है। छवि के नीचे काट दिया गया है। मैं नीचे की जगह शीर्ष पर कटौती कैसे करूं?मैं अपने कंटेनर के नीचे एक छवि कैसे शुरू करूं?
उत्तर
कंटेनर निम्नलिखित सीएसएस दे:
position:relative;
और छवि निम्नलिखित सीएसएस:
position:absolute;
bottom:0px;
पी.एस. btw
+1, क्योंकि आपने उत्तर देने के बारे में बहुत अधिक जवाब दिया था! =) क्या मैं आपको उस डेमो की पेशकश कर सकता हूं जिस पर मैं काम कर रहा था: [जेएस फिडल] (http://jsfiddle.net/davidThomas/47Qne/1/)। –
मुझे गंभीरता से नहीं मिलता कि मैं +1 से 2 से 0 तक +2 तक 5 मिनट में कैसे चला गया O_o –
@ डेविड थॉमस व्हाउ! बहुत बढ़िया डेमो! (थोड़ा अधिक हो सकता है) लेकिन अभी भी बहुत अच्छी तरह से किया! –
बहुत अच्छा (और स्पष्ट) चित्र तो अपनी छवि सिर्फ कंटेनर के background-image
है, इस तरह से कार्य करें: अन्यथा
#container {
background: url(your-image.jpg) no-repeat bottom left;
}
, कंटेनर के नीचे करने के img
तत्व की स्थिति, जैसे @Joseph सुझाव: कंटेनर उदाहरण के लिए एक 300px ऊंचाई है
#container {
position:relative;
}
#container img {
position: absolute;
bottom: 0px;
}
ठीक है, धन्यवाद। मेरे पास एचटीएमएल है: '
हैं, तो यह काम करता है:
चित्रण के लिए.container {
overflow: hidden;
height: 300px;
position: relative;
}
.image {
position: absolute;
bottom: 0;
}
+1। –