मैं छवियों के साथ काम कर रहा हूं, और मैं पहलू अनुपात के साथ एक समस्या पर भागा हूं।
<img src="big_image.jpg" width="900" height="600" alt="" />जैसा कि आप देख सकते हैं, heightऔर widthपहले से ही निर्दिष्ट हैं। मैंने छवियों के लिए CSS नियम जोड़ा:
img {
max-width:500px;
}
लेकिन के लिए big_image.jpg, मैं प्राप्त width=500और height=600। मैं उनके पहलू अनुपात को बनाए रखते हुए छवियों को फिर से आकार में कैसे सेट कर सकता हूं।
जवाबों:
img {
display: block;
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">यदि यह निर्दिष्ट क्षेत्र के लिए बहुत बड़ा है, तो यह छवि को छोटा कर देगा (नीचे की ओर, यह छवि को बड़ा नहीं करेगा)।
<img>कि खुद में एक चौड़ाई और ऊंचाई शामिल है और मुझे लगता है कि इसका मतलब है कि आपको !importantटैग की चौड़ाई / ऊंचाई की जानकारी को कम करने के लिए उपयोग करने की आवश्यकता है ।
!importantआवश्यकता नहीं है।
मैंने इस समस्या से काफी संघर्ष किया है, और आखिरकार इस सरल समाधान पर पहुंचे:
object-fit: cover;
width: 100%;
height: 250px;आप अपनी आवश्यकताओं को पूरा करने के लिए चौड़ाई और ऊंचाई को समायोजित कर सकते हैं, और ऑब्जेक्ट-फिट संपत्ति आपके लिए फसल का काम करेगी।
चीयर्स।
object-fitशानदार है, शानदार टिप! अगर कोई IE संगतता के बारे में सोच रहा है तो कुछ ठीक पॉलीफ़िल लाइब्रेरी हैं।
object-fit: containएक चौड़ाई या ऊंचाई का उपयोग और निर्दिष्ट भी कर सकते हैं !
नीचे दिए गए समाधान पैरेंट बॉक्स की चौड़ाई के आधार पर छवि को स्केलिंग और स्केलिंग डाउन करने की अनुमति देंगे ।
सभी छवियों में केवल प्रदर्शन उद्देश्यों के लिए एक निश्चित चौड़ाई वाला एक मूल कंटेनर होता है । उत्पादन में, यह मूल बॉक्स की चौड़ाई होगी।
यह समाधान ब्राउज़र को अधिकतम उपलब्ध चौड़ाई के साथ छवि को प्रस्तुत करने और उस चौड़ाई के प्रतिशत के रूप में ऊंचाई को समायोजित करने के लिए कहता है।
.parent {
width: 100px;
}
img {
display: block;
width: 100%;
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
<img width="400" height="400" src="https://placehold.it/400x400">
</div>कट्टर समाधान के साथ, आप छवि को उसके आकार की परवाह किए बिना काट-छाँट के लिए क्षतिपूर्ति करने के लिए एक पृष्ठभूमि रंग जोड़ पाएंगे।
.parent {
width: 100px;
}
.container {
display: block;
width: 100%;
height: auto;
position: relative;
overflow: hidden;
padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}
.container img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
<div class="container">
<img width="640" height="220" src="https://placehold.it/640x220">
</div>
</div>पैडिंग निर्दिष्ट करने वाली रेखा के लिए, आपको उदाहरण के लिए, छवि के पहलू अनुपात की गणना करने की आवश्यकता है:
640px (w) = 100%
220px (h) = ?
640/220 = 2.909
100/2.909 = 34.37%तो, शीर्ष पैडिंग = 34.37%।
!importantयहां जरूरत है।
बैकग्राउंड-साइज़ प्रॉपर्टी है अर्थात> = 9 केवल, लेकिन अगर वह आपके साथ ठीक है, तो आप एक डिव का उपयोग background-imageऔर सेट कर सकते हैं background-size: contain:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}अब आप अपने डिव साइज़ को बस जो चाहें सेट कर सकते हैं और न केवल इमेज अपने आस्पेक्ट रेशियो को बनाए रखेगा, यह डिव के भीतर लंबवत और क्षैतिज दोनों रूप से केंद्रीकृत होगा। बस सीएसएस पर आकार सेट करने के लिए मत भूलना क्योंकि divs की टैग पर चौड़ाई / ऊंचाई विशेषता नहीं है।
यह दृष्टिकोण सेटेक उत्तर से भिन्न है, इसका उपयोग करके छवि क्षेत्र स्थिर और आपके द्वारा परिभाषित किया जाएगा (रिक्त स्थान छोड़कर या तो क्षैतिज या लंबवत रूप से div आकार और छवि पहलू अनुपात के आधार पर), जबकि सेटेक उत्तर आपको एक बॉक्स मिलेगा जो वास्तव में होगा स्केल की गई छवि का आकार (रिक्त स्थान के बिना)।
संपादित करें: MDN पृष्ठभूमि-आकार के दस्तावेज़ के अनुसार आप IE8 में एक मालिकाना फ़िल्टर घोषणा का उपयोग करके पृष्ठभूमि के आकार की संपत्ति का अनुकरण कर सकते हैं:
हालाँकि Internet Explorer 8 पृष्ठभूमि-आकार की संपत्ति का समर्थन नहीं करता है, लेकिन गैर-मानक-फ़िल्टर फ़िल्टर का उपयोग करके इसकी कुछ कार्यक्षमता का अनुकरण करना संभव है:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";यहाँ कुछ उत्तरों के समान, लेकिन मेरे मामले में मेरे पास ऐसी छवियां थीं जो कभी लंबी थीं, कभी बड़ी थीं।
इस शैली ने एक आकर्षण की तरह काम किया, यह सुनिश्चित करने के लिए कि सभी छवियां सभी उपलब्ध स्थान का उपयोग करती हैं, अनुपात रखें और कटौती न करें:
.img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}object-fitमेरे लिए काम करता है यह सभी ब्राउज़र में काम करता है?
.imgमाता-पिता या छवि पर एक वर्ग? आप चित्र और परिदृश्य छवियों दोनों के लिए उदाहरण के साथ एक jsfiddle कर सकते हैं?
"ऊंचाई" संपत्ति निकालें।
<img src="big_image.jpg" width="900" alt=""/>दोनों को निर्दिष्ट करके आप छवि के पहलू अनुपात को बदल रहे हैं। बस एक सेट आकार बदल जाएगा, लेकिन पहलू अनुपात को संरक्षित करेगा।
वैकल्पिक रूप से, ओवरसिज़िंग को प्रतिबंधित करने के लिए:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>heightमें विशेषता को छोड़ने का नकारात्मक पहलू यह imgहै कि ब्राउज़र यह गणना नहीं कर सकता है कि छवि डाउनलोड करने से पहले छवि कितनी जगह लेगी। यह पेज को रेंडर करने के लिए धीमा कर देता है और इससे "जंपिंग" हो सकता है।
बस इसे अपने सीएसएस में जोड़ें, यह मूल अनुपात को बनाए रखने के साथ स्वचालित रूप से सिकुड़ जाएगा और विस्तारित होगा।
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}100%विशिष्ट पिक्सेल मान के बजाय उपयोग करने के अलावा ।
display: block;अनावश्यक है।
छवियों के लिए पहलू अनुपात को संरक्षित करने के लिए कोई मानक तरीका नहीं है width, heightऔर max-widthएक साथ निर्दिष्ट किया गया है।
इसलिए हम मजबूर हैं या तो निर्दिष्ट करने के लिए widthऔर heightचित्र लोड दौरान पेज "कूदता" को रोकने के लिए, या उपयोग करने के लिए max-widthऔर छवियों के लिए आयाम निर्दिष्ट नहीं।
केवल width(बिना height) निर्दिष्ट करना आम तौर पर बहुत मायने नहीं रखता है, लेकिन आप अपनी स्टाइलशीट में heightएक नियम जोड़कर HTML-विशेषता को ओवरराइड करने का प्रयास कर सकते हैं IMG {height: auto; }।
संबंधित फ़ायरफ़ॉक्स बग 392261 भी देखें ।
!importantCSS में उपयोग न करें । यह एक हैक है जो अंततः आपको परेशान करने के लिए वापस आ जाएगा।
!importantहै।
यहाँ एक समाधान है:
img {
width: 100%;
height: auto;
object-fit: cover;
}यह सुनिश्चित करेगा कि छवि हमेशा पूरे माता-पिता (नीचे और ऊपर स्केलिंग) को कवर करती है और समान पहलू अनुपात रखती है।
अपनी छवि कंटेनर टैग का CSS वर्ग इसमें सेट करें image-class:
<div class="image-full"></div>और इसे आप अपनी CSS स्टाइलशीट में जोड़ें।
.image-full {
background: url(...some image...) no-repeat;
background-size: cover;
background-position: center center;
}एक निश्चित पहलू अनुपात के लिए छवि को लागू करते समय एक उत्तरदायी छवि बनाए रखने के लिए आप निम्नलिखित कार्य कर सकते हैं:
HTML:
<div class="ratio2-1">
<img src="../image.png" alt="image">
</div>और SCSS:
.ratio2-1 {
overflow: hidden;
position: relative;
&:before {
content: '';
display: block;
padding-top: 50%; // ratio 2:1
}
img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}यह एक निश्चित पहलू अनुपात को लागू करने के लिए इस्तेमाल किया जा सकता है, भले ही उस छवि का आकार जो लेखकों को अपलोड करता है।
पर @Kseso के लिए धन्यवाद http://codepen.io/Kseso/pen/bfdhg । अधिक अनुपात और काम करने के उदाहरण के लिए इस URL की जाँच करें।
border-radius। लेकिन दुर्भाग्य से, यह छवि को क्रॉप करता है और डिव में छवि की सीमा बनाने के साथ इतना अच्छा नहीं करता है जितना मैंने कोशिश की है।
सटीक आकार में फिट होने वाली छवि के लिए, आपको बहुत सारे कोड लिखने की आवश्यकता नहीं है। यह बहुत आसान हैं
img{
width: 200px;
height: auto;
object-fit: contain; /* Fit logo in the image size */
-o-object-fit: contain; /* Fit logo fro opera browser */
object-position: top; /* Set logo position */
-o-object-position: top; /* Logo position for opera browser */
}<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">https://jsfiddle.net/sot2qgj6/3/
यदि आप निश्चित चौड़ाई के प्रतिशत के साथ छवि रखना चाहते हैं, तो इसका उत्तर यहां है , लेकिन चौड़ाई का निश्चित पिक्सेल नहीं ।
और यह स्क्रीन के विभिन्न आकार के साथ काम करते समय उपयोगी होगा ।
चालें हैं
padding-topचौड़ाई से ऊँचाई निर्धारित करने के लिए उपयोग करना ।position: absoluteपैडिंग स्पेस में छवि डालने के लिए उपयोग करना ।max-height and max-widthयह सुनिश्चित करने के लिए उपयोग करना कि छवि मूल तत्व से अधिक नहीं होगी।display:block and margin: autoछवि को केंद्रित करने के लिए करना।मैंने फिडेल के अंदर के अधिकांश ट्रिक्स पर भी टिप्पणी की है।
मैं ऐसा करने के लिए कुछ अन्य तरीके भी खोजता हूं। Html में कोई वास्तविक छवि नहीं होगी, इसलिए मैं html में "img" तत्व की आवश्यकता होने पर शीर्ष उत्तर देता हूं।
पृष्ठभूमि का उपयोग करके सरल सीएसएस http://jsfiddle.net/4660s79h/2/
बैकग्राउंड-इमेज शब्द के साथ शीर्ष पर http://jsfiddle.net/4660s79h/1/
पूर्ण स्थिति का उपयोग करने की अवधारणा यहाँ से है http://www.w3schools.com/howto/howto_css_aspect_ratio.asp
आप इसका उपयोग कर सकते हैं:
img {
width: 500px;
height: 600px;
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}आप इस तरह से एक div बना सकते हैं:
<div class="image" style="background-image:url('/to/your/image')"></div>और इस सीएसएस का उपयोग इसे स्टाइल करने के लिए करें:
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be coverमैं एक प्रतिक्रियात्मक दृष्टिकोण के लिए सुझाव दूंगा कि सबसे अच्छा अभ्यास व्यूपोर्ट इकाइयों और न्यूनतम / अधिकतम विशेषताओं का उपयोग इस प्रकार होगा:
img{
display: block;
width: 12vw;
height:12vw;
max-width:100%;
min-width:100px;
min-height:100px;
object-fit:contain;
}यदि यह निर्दिष्ट क्षेत्र के लिए बहुत बड़ा है, तो यह छवि को छोटा कर देगा (नीचे की ओर, यह छवि को बड़ा नहीं करेगा)।
ऑटो मोड में "सिक्रंक टू फिट" के लिए सेटेक द्वारा समाधान ठीक है। लेकिन, बेहतर तरीके से 'ऑटो' मोड में फिट होने के लिए, आपको पहले प्राप्त छवि को एक अस्थायी आईडी में डालना होगा, जांचें कि क्या इसे ऊंचाई या चौड़ाई में विस्तारित किया जा सकता है (इसके पहलू राशन v / s के पहलू अनुपात के आधार पर) आपका प्रदर्शन ब्लॉक),
$(".temp_image").attr("src","str.jpg" ).load(function() {
// callback to get actual size of received image
// define to expand image in Height
if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
$(".image").css('height', max_height_of_box);
$(".image").css('width',' auto');
} else {
// define to expand image in Width
$(".image").css('width' ,max_width_of_box);
$(".image").css('height','auto');
}
//Finally put the image to Completely Fill the display area while maintaining aspect ratio.
$(".image").attr("src","str.jpg");
});यह तरीका तब उपयोगी है जब प्राप्त चित्र डिस्प्ले बॉक्स से छोटे हों। आकार और बैंडविड्थ पर सहेजने के लिए अपने बड़े डिस्प्ले बॉक्स को भरने के लिए आपको उन्हें अपने विस्तारित संस्करण के बजाय मूल छोटे आकार में अपने सर्वर पर सहेजना होगा।
img {
max-width: 80px; /* Also works with percentage value like 100% */
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">
<p>Let's say the author of the HTML deliberately wants
the height to be half the value of the width,
this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">ऊर्ध्वाधर संरेखण के लिए छद्म तत्व का उपयोग करने के बारे में कैसे? यह कम कोड हिंडोला के लिए है, लेकिन मुझे लगता है कि यह हर निश्चित आकार के कंटेनर पर काम करता है। यह पहलू अनुपात को बनाए रखेगा और सबसे ऊपर के आयाम के लिए ऊपर / नीचे या बाएं / लिखें पर @ ग्रे-डार्क बार डालें। इस बीच छद्म तत्व द्वारा छवि को पाठ-संरेखित और लंबवत रूप से क्षैतिज रूप से केंद्रित किया जाता है।
> li {
float: left;
overflow: hidden;
background-color: @gray-dark;
text-align: center;
> a img,
> img {
display: inline-block;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
margin: auto;
text-align: center;
}
// Add pseudo element for vertical alignment of inline (img)
&:before {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
}मुझे लगता है, अंत में यह सबसे अच्छा समाधान है, आसान और सरल :
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}