सीएसएस: पहलू अनुपात रखते हुए 100% चौड़ाई या ऊंचाई?

174

वर्तमान में, स्टाइल के साथ, मैं उपयोग कर सकता हूं width: 100%और autoऊंचाई पर (या इसके विपरीत), लेकिन मैं अभी भी छवि को एक विशिष्ट स्थिति में नहीं बाधित कर सकता हूं, या तो क्रमशः बहुत चौड़ा या लंबा हो सकता है।

कोई विचार?

— वेस्टन वॉटसन
स्रोत

3

क्या आप इस मुद्दे का उदाहरण दिखाने के लिए एक लिंक या स्क्रीनशॉट पोस्ट कर सकते हैं?

— मौरो

138

यदि आप केवल एक आयाम को एक छवि पर परिभाषित करते हैं तो छवि पहलू अनुपात हमेशा संरक्षित रहेगा।

क्या मुद्दा यह है कि छवि आपकी पसंद से बड़ी / लंबी है?

आप इसे एक DIV के अंदर रख सकते हैं जो अधिकतम ऊंचाई / चौड़ाई पर सेट है जिसे आप छवि के लिए चाहते हैं, और फिर अतिप्रवाह सेट करें: छिपा हुआ। जो कुछ भी आप चाहते हैं उससे आगे फसल होगी।

यदि कोई छवि 100% चौड़ी और ऊँचाई पर है: ऑटो और आपको लगता है कि यह बहुत लंबा है, इसलिए विशेष रूप से क्योंकि पहलू अनुपात संरक्षित है। आपको फसल, या पहलू अनुपात को बदलने की आवश्यकता होगी।

कृपया जो आप विशेष रूप से पूरा करने की कोशिश कर रहे हैं उसके बारे में कुछ और जानकारी प्रदान करें और मैं और अधिक मदद करने की कोशिश करूँगा!

--- फ़ीडबैक पर संपादित संपादित करें ---

क्या आप अधिकतम-चौड़ाई और अधिकतम-ऊंचाई गुणों से परिचित हैं? आप हमेशा उन के बजाय सेट कर सकते हैं। यदि आप कोई न्यूनतम सेट नहीं करते हैं और आप अधिकतम ऊँचाई और चौड़ाई निर्धारित करते हैं, तो आपकी छवि विकृत नहीं होगी (पहलू अनुपात संरक्षित किया जाएगा) और यह किसी से बड़ा नहीं होगा जो भी आयाम सबसे लंबा है और इसकी अधिकतम हिट करता है।

— एंड्रयू
स्रोत

16

यदि छवि चौड़ी है, तो मैं ऊंचाई = 100% और चौड़ाई = ऑटो का उपयोग करूंगा, यदि छवि लंबी है, तो मैं चौड़ाई = 100%, ऊंचाई = ऑटो का उपयोग करूंगा। मैं बस कभी नहीं जानता कि मामला क्या है? अधिकतम ऊंचाई / चौड़ाई से फसल काम करेगी- लेकिन अगर ऐसा करने का कोई तरीका नहीं है - तो मैं इसका इस्तेमाल नहीं करूँगा ...

— वेस्टन वाटसन

2

ठीक है, क्या आप एक तरल पदार्थ या निश्चित-चौड़ाई वाले लेआउट को डिजाइन कर रहे हैं? यदि आप एक निश्चित-चौड़ाई वाले लेआउट में हैं तो आप हमेशा अपनी चौड़ाई 100% तक सेट कर सकते हैं और छवि उचित रूप से स्केल होगी, लेकिन यह बहुत लंबा हो सकता है। क्या आप किसी छवि को टेक्स्ट के ब्लॉक में रखने की कोशिश कर रहे हैं, या इसे बैनर के रूप में, या पृष्ठभूमि के रूप में उपयोग कर रहे हैं? यदि आप वह पृष्ठ दिखा सकते हैं जहाँ आप इसका उपयोग करने की योजना बना रहे हैं या उस संदर्भ का वर्णन कर सकते हैं जो मैं आपकी अधिक मदद कर सकता हूँ। ऊपर भी संपादन देखें।

— एंड्रयू

मेरे img पर अधिकतम ऊंचाई का उपयोग करने से मुझे उनके पहलू अनुपात को बनाए रखते हुए छवियों को

— कसने की अनुमति मिली

2

object-fitकिसी काम का नहीं?

— लीगी

77

कुछ साल बाद, उसी आवश्यकता की तलाश में, मुझे बैकग्राउंड-साइज़ का उपयोग करके CSS विकल्प मिला।

यह आधुनिक ब्राउज़रों (IE9 +) में काम करने वाला है।

<div id="container" style="background-image:url(myimage.png)">
</div>

और शैली:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

संदर्भ: http://www.w3schools.com/cssref/css3_pr_background-size.asp

और डेमो: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

— Conca
स्रोत

3

आदर्श समाधान, जो दुख की बात है IE8 द्वारा समर्थित नहीं है :(

— japrescott

यह आदर्श समाधान है, लेकिन अगर आप इसे हिंडोले में करते हैं, तो यह प्रत्येक स्लाइड के बाद छवियों को एक सेकंड के लिए खाली करने का कारण बनता है।

— कलोड़दंत

58

CSS max-widthप्रॉपर्टी को करने के लिए 100%, एक छवि इसकी पेरेंटिंग तत्व की चौड़ाई को भर देगी, लेकिन वास्तविक आकार से बड़ा रेंडर नहीं करेगी, इस प्रकार रिज़ॉल्यूशन को संरक्षित करना।

छवि के पहलू अनुपात heightको autoबनाए रखने के लिए संपत्ति सेट करना , इस तकनीक का उपयोग करके स्थैतिक ऊंचाई को ओवरराइड करने की अनुमति मिलती है और छवि को सभी दिशाओं में आनुपातिक रूप से फ्लेक्स करने में सक्षम बनाता है।

img {
    max-width: 100%;
    height: auto;      
}

— एडम वेटे
स्रोत

1

अभी तक heightauto

— रिफ्लेक्ट

42

सरल सुरुचिपूर्ण काम कर समाधान:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

— user3334941
स्रोत

3

मुझे याद दिलाने के लिए धन्यवाद object-fit। बिल्कुल वही जो मुझे चाहिए था।

— ऐश क्लार्क

5

यह एक आदर्श समाधान है, लेकिन दुर्भाग्य object-fitसे IE और एज के किसी भी संस्करण में 28 मार्च, 2017 तक समर्थित नहीं है।

— साइमन जी

2

मार्च 2019 तक इस सुविधा का 90% समर्थन है - इसलिए इसे वास्तव में सही उत्तर माना जाना चाहिए।

— हम्पस अहलग्रेन

इसके अलावा, सूचना है कि object-fit: containऔर object-fit: coverन की तरह width100% की तरह - आप ठोस इकाइयां तरह का उपयोग करना चाहिएpx

— FlameStorm

मैं के object-fitसाथ max-widthऔर के max-heightरूप में अन्य उत्तरों में इस्तेमाल करने की कोशिश की , लेकिन वह काम नहीं किया। यह और भी साथ यादृच्छिक छवि आकार के लिए पूरी तरह से काम करता है widthऔरheight 100%

— Halfacht

27

एक ही मुद्दा था। मेरे लिए समस्या यह थी कि ऊंचाई की संपत्ति को पहले से ही कहीं और परिभाषित किया गया था, इसे इस तरह से निर्धारित किया गया था:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

— फ़्लो
स्रोत

ठीक वही जो मेरे द्वारा खोजा जा रहा था। धन्यवाद एक लाख दोस्त।

— लंदन स्मिथ

सही जहां छवि का आकार पैरेंट डिव से छोटा या बड़ा हो सकता है, और इसे अधिकतम चौड़ाई या अधिकतम ऊंचाई के साथ सही केंद्र में आकार दिया जाएगा। आपको एक पृष्ठभूमि के रूप में छवि का उपयोग करने की आवश्यकता नहीं है जो "कवर" करने के लिए सेट होने पर माता-पिता को ओवरफिल कर देगा।

— रहमत

9

सरल समाधान:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

वैसे, यदि आप इसे पेरेंट डिव कंटेनर में रखना चाहते हैं, तो आप उन सीएसएस गुणों को जोड़ सकते हैं:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

यह वास्तव में उम्मीद के मुताबिक काम करना चाहिए :)

— एलेक्सिस के
स्रोत

पहले भाग को उकेरा। दूसरे भाग ने मेरे लिए काम नहीं किया ... :(

— विकास बंसल

बस एक समस्या - अगर छवि 100% कंटेनर से बड़ी है, तो यह बाहर फैल जाएगी और स्क्रॉलबार या क्रॉपिंग की आवश्यकता होगी। यकीन नहीं है, कैसे प्राप्त करने के लिए और अभी भी कंटेनर के लिए अधिकतम आकार को सीमित करें। यदि अधिकतम-चौड़ाई और ऊंचाई सेट करते हैं, तो यह पहलू अनुपात को संरक्षित नहीं करता है।

— जस्टअमार्टिन

5

उत्तरों में से एक में पृष्ठभूमि का आकार शामिल है: इसमें css स्टेटमेंट शामिल है जो मुझे बहुत पसंद है क्योंकि यह सीधा-सीधा बयान है कि आप क्या करना चाहते हैं और ब्राउज़र बस इसे करता है।

दुर्भाग्य से जल्दी या बाद में आपको एक छाया लागू करने की आवश्यकता होती है जो दुर्भाग्य से पृष्ठभूमि छवि समाधानों के साथ अच्छा नहीं खेलेगी।

तो मान लें कि आपके पास एक कंटेनर है जो उत्तरदायी है, लेकिन इसमें न्यूनतम और अधिकतम चौड़ाई और ऊंचाई के लिए अच्छी तरह से परिभाषित सीमाएं हैं।

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

और कंटेनर में एक img होता है जिसे कंटेनर की ऊँचाई के पिक्सेल के बारे में पता होना चाहिए ताकि वह बहुत अधिक छवि प्राप्त करने से बच सके जो बहुत अधिक हो या फसली हो।

Img को पहले छोटी चौड़ाई को रेंडर करने की अनुमति देने के लिए 100% की अधिकतम-चौड़ाई को परिभाषित करना चाहिए और दूसरे को प्रतिशत आधारित होना चाहिए जो इसे पैरामीट्रिक बनाता है।

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

ध्यान दें कि इसकी एक अच्छी छाया है;)

इस पहेली पर एक जीवंत उदाहरण का आनंद लें: http://jsfiddle.net/pligor/gx8qthqL/2/

— जॉर्ज प्लिगोपोपोलोस
स्रोत

चीयर्स - वास्तव में मैं क्या देख रहा था।

— एली

इस समाधान और jsdfiddle लिंक के लिए धन्यवाद। यह वास्तव में मेरी प्रतिक्रिया-छवि-गैलरी के लिए काम करता है जहां मैं दोनों का उपयोग करता हूं: बड़ी ऊंचाई वाली छवियां और बड़ी चौड़ाई वाली छवियां। :)

— यूजेनिजस एस।

4

मैं इसे एक आयताकार कंटेनर के लिए ऊंचाई और चौड़ाई तय करने के लिए उपयोग करता हूं, लेकिन विभिन्न आकारों की छवियों के साथ।

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

— एलेजांद्रो सलामांका मजुएलो
स्रोत

3

पहलू अनुपात का सम्मान करने वाले आयाम पर ऑटो का उपयोग करना सबसे अच्छा है। यदि आप अन्य संपत्ति को ऑटो में सेट नहीं करते हैं, तो आजकल अधिकांश ब्राउज़र मान लेंगे कि आप पहलू राशन का सम्मान करना चाहते हैं, लेकिन उनमें से सभी (IE10 विंडोज़ फोन 8 पर नहीं है, उदाहरण के लिए)

width: 100%;
height: auto;

— डेवी
स्रोत

2

यह एक बहुत ही सीधा समाधान है, जिसे मैं कॉन्का के लिंक का अनुसरण करने और पृष्ठभूमि के आकार को देखने के बाद आया था। यह छवि को ऊपर उठाता है और फिर इसे बाहरी कंटेनर w / o स्केलिंग में केंद्रित करता है।

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

— बिल दाविस
स्रोत

अच्छा और स्मार्ट समाधान! अतिरिक्त 40% के साथ आप पहलू अनुपात की भरपाई करते हैं। धन्यवाद!

— साचा

तुम भी बस background-size: contain;एक पृष्ठभूमि में छवि को फिट करने के लिए उपयोग कर सकते हैं ।

— साइमन जी

1

एक पुराने मुद्दे में कूदने के लिए नहीं, लेकिन ...

#container img {
      max-width:100%;
      height:auto !important;
}

भले ही यह उचित नहीं है क्योंकि आप ऊंचाई पर महत्वपूर्ण ओवरराइड का उपयोग करते हैं, यदि आप वर्डप्रेस जैसे सीएमएस का उपयोग कर रहे हैं जो आपके लिए ऊंचाई और चौड़ाई निर्धारित करता है, तो यह अच्छी तरह से काम करता है।

— लेवी जी
स्रोत

1

आजकल एक का उपयोग कर सकते हैं vwऔर vhइकाइयों, जिनमें से 1% का प्रतिनिधित्व वी iewport है w idth और ज क्रमशः आठ।

https://css-tricks.com/fun-viewport-units/

इसलिए, उदाहरण के लिए:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... छवि को यथासंभव व्यापक बनाएंगे, पहलू अनुपात बनाए रखेंगे, लेकिन व्यूपोर्ट के 100% से अधिक व्यापक या उच्च स्तर के बिना।

— जोनास बर्लिन
स्रोत

0

JQuery या तो का उपयोग करें, क्योंकि सीएसएस एक सामान्य गलत धारणा है (सरल डिजाइन लक्ष्यों के बारे में यहां अनगिनत सवाल और चर्चाएं दिखाती हैं)।

सीएसएस के साथ यह करना संभव नहीं है कि आप क्या चाहते हैं: छवि की चौड़ाई 100% होगी, लेकिन यदि इस चौड़ाई का परिणाम बहुत बड़ी है, तो अधिकतम-ऊंचाई लागू होगी - और निश्चित रूप से सही अनुपात होगा संरक्षित।

— Ungesund
स्रोत

-2

मुझे लगता है कि यह आपकी तलाश है, मैं इसे अपने लिए देख रहा था, लेकिन फिर मुझे याद आया कि फिर से मुझे कोड मिल गया।

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

डिजिटल विकास अपने रास्ते पर है।

— पीटर ग्रुपेलाकर
स्रोत