के साथ div में केंद्र छवि मेरे पास 400px की एक छवि है और एक div जो छोटा है (चौड़ाई हमेशा मेरे उदाहरण में 300px नहीं है)। मैं div में छवि को केंद्र में रखना चाहता हूं, और यदि कोई ओवरफ़्लो है, तो इसे छुपाएं।ओवरफ्लो छिपे हुए
नोट: मुझे स्थिति रखना चाहिए: इमेज पर पूर्ण। मैं सीएसएस-संक्रमण के साथ काम कर रहा हूं, और यदि मैं स्थिति का उपयोग करता हूं: सापेक्ष, मेरी छवि थोड़ा सा हिलाती है (http://bit.ly/MaYbMB)।
jsfiddle http://jsfiddle.net/wjw83/1/
आपको कंटेनर रिश्तेदार बनाना चाहिए और इसे ऊंचाई भी देना चाहिए और आप कर चुके हैं।
http://jsfiddle.net/jaap/wjw83/4/
.main {
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 200px;
}
img.absolute {
left: 50%;
margin-left: -200px;
position: absolute;
}<div class="main">
<img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />आप भी एक नकारात्मक मार्जिन और शीर्ष स्थान जोड़कर खड़ी छवि केंद्रित कर सकता है आप करना चाहते हैं: http://jsfiddle.net/jaap/wjw83/5/
ऊपर साइट पर पहला तरीका के लिए इस
3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...
डेमो में से एक कोशिश को छिपाने के लिए है
मैं इसके बारे में कुछ पढ़ूंगा भी
<html>
<head>
<style type="text/css">
.div-main{
height:200px;
width:200px;
overflow: hidden;
background:url(img.jpg) no-repeat center center
}
</style>
</head>
<body>
<div class="div-main">
</div>
</body>
बस सुनिश्चित करें कि आप सीएसएस पृष्ठभूमि उपयोग बैकग्राउड छवि स्थिति पृष्ठभूमि के माध्यम से छवि का उपयोग कैसे कर रहे हैं: यूआरएल (आपका छवि पथ) नो-दोहराना केंद्र केंद्र; स्वचालित रूप से यह स्क्रीन पर केंद्र संरेखित होगा।
यह रैपर div के बाएं किनारे के आधार पर आपके विचारों और थोड़ा गणित का उपयोग करके हमारी साइट पर काम करता है। ऐसा लगता है कि 50% बाएं जाने के लिए अनावश्यक लगता है तो 50% अतिरिक्त मार्जिन लें, लेकिन ऐसा लगता है कि यह काम करता है। मुख्य:
div.ImgWrapper {
width: 160px;
height: 160px
overflow: hidden;
text-align: center;
}
img.CropCenter {
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 160px !important;
}
<div class="ImgWrapper">
<a href="#"><img class="CropCenter" src="img.png"></a>
</div>
मैं एक अंतर के साथ मेरी हाल ही में साइट के this page अंदर जाप का जवाब लागू करने के लिए, कोशिश कर रहे हैं {ऊंचाई:} के बजाय ऑटो एक निश्चित पिक्सल मान पर सेट किया गया था। उत्तरदायी डेवलपर के रूप में मैं बाएं फ़्लोटिंग टेक्स्ट तत्व के साथ छवि ऊंचाई को सिंक्रनाइज़ करने के लिए एक समाधान की तलाश में हूं, फिर भी केवल अगर मेरी टेक्स्ट ऊंचाई अधिक हो जाती है तो मेरी वास्तविक छवि ऊंचाई। उस स्थिति में छवि को रद्द नहीं किया जाना चाहिए, लेकिन उपरोक्त मूल प्रश्न में वर्णित के रूप में फसल और केंद्रित। क्या यह किया जा सकता है? आप धीरे-धीरे ब्राउज़र की चौड़ाई को कम करके व्यवहार को अनुकरण कर सकते हैं।
इस मुद्दे में एक बड़ा दर्द है .. लेकिन मुझे अंततः यह मिला। मैंने बहुत जटिल समाधान देखा है। यह अब इतना आसान है कि मैं इसे देखता हूं।
.parent {
width:70px;
height:70px;
}
.child {
height:100%;
width:10000px; /* Or some other impossibly large number */
margin-left: -4965px; /* -1*((child width-parent width)/2) */
}
.child img {
display:block; /* won't work without this */
height:100%;
margin:0 auto;
}
उपरोक्त में से कोई भी समाधान मेरे लिए अच्छा काम नहीं कर रहा था।मैं एक गतिशील छवि का आकार की जरूरत overflow:hidden
.circle-container {
width:100px;
height:100px;
text-align:center;
border-radius:50%;
overflow:hidden;
}
.circle-img img {
min-width:100px;
max-width:none;
height:100px;
margin:0 -100%;
}
कार्य उदाहरण यहाँ के साथ एक परिपत्र पैरेंट कंटेनर में फिट करने के लिए: http://codepen.io/simgooder/pen/yNmXer
आपकी प्रतिक्रिया के लिए धन्यवाद, मैं अब कुछ रातों के लिए ऐसा करने का एक तरीका खोज रहा हूं और आपने इसे हल कर लिया है! –
कोई समस्या नहीं! इसमें बहुत गड़बड़ी हुई, लेकिन इसमें बहुत से अनुप्रयोग हैं - यह लगभग अनिवार्य है। –
धन्यवाद! मैं समय के साथ इस समस्या पर वापस आ रहा हूं क्योंकि मैं कभी भी अन्य समाधानों से 100% संतुष्ट नहीं रहा हूं ... 'परिवर्तन: अनुवाद' बस बहुत उग्र हो रहा है। मैंने 'मार्जिन: 0 ऑटो' का उपयोग करने के लिए कई बार कोशिश की जो काम नहीं कर सका। वास्तविक जादू 'ऑटो' मान के बजाय 'मार्जिन: 0 -100% 'के साथ होता है :) – aequalsb
मिले यह अच्छा sollution MELISSA PENTA द्वारा
एचटीएमएल
<div class="wrapper">
<img src="image.jpg" />
</div>
सीएसएस
div.wrapper {
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
width:200px;
}
div.wrapper img {
margin:-100%;
}
केंद्र div
में किसी भी आकार छवि गोल आवरण और अलग अलग आकार की छवियों के साथ प्रयोग किया जाता है।
सीएसएस
.item-image {
border: 5px solid #ccc;
border-radius: 100%;
margin: 0 auto;
height: 200px;
width: 200px;
overflow: hidden;
text-align: center;
}
.item-image img {
height: 200px;
margin: -100%;
max-width: none;
width: auto;
}
कार्य उदाहरण यहाँ codepen
यह समझना महत्वपूर्ण है कि वास्तव में समस्या है और क्या करना है आप को प्राप्त करने की कोशिश क्या काफी मुश्किल है। क्या [यह है] (http://jsfiddle.net/teneff/wjw83/3/)? Http://bit.ly/MaYbMB पर – Teneff
, यदि आप इसे होवर करते हैं तो टैब 'कोचिंग' थोड़ा सा हिलाता है। मैं उस स्थिति का उपयोग कर हल करना चाहता हूं: पूर्ण। समस्या यह है कि अतिप्रवाह: छिपी स्थिति के साथ एक बच्चे तत्व को प्रभावित नहीं करता है: पूर्ण। – Puyol