107

मैं अपनी थंबनेल गैलरी को कॉन्फ़िगर करने के लिए अब कुछ दिनों से कोशिश कर रहा हूं ताकि सभी चित्र समान ऊँचाई और चौड़ाई के दिखाई दें। हालाँकि जब मैं Css कोड को बदलता हूँ

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

मुझे ऐसी छवियां मिलती हैं जो सभी समान हैं लेकिन पहलू अनुपात छवियों को बर्बाद कर रहा है। क्या छवि कंटेनर का आकार बदलने का कोई तरीका नहीं है और इसके बजाय छवि नहीं है? मुझे पहलू अनुपात रखने की अनुमति देता है। लेकिन अभी भी छवि का आकार बदलें। (अगर मुझे छवि में से कुछ काट दिया जाए तो मुझे कोई आपत्ति नहीं है।)

अग्रिम में धन्यवाद!

— Beaniie
स्रोत

184

यह CSS रीसाइज़िंग के साथ एक ज्ञात समस्या है, जब तक कि सभी छवियों का समान अनुपात न हो, आपके पास CSS के माध्यम से ऐसा करने का कोई तरीका नहीं है।

सबसे अच्छा तरीका एक कंटेनर होगा, और छवियों में से एक आयाम (हमेशा समान) का आकार बदलना होगा। मेरे उदाहरण में मैंने चौड़ाई का आकार बदल दिया।

यदि कंटेनर में एक निर्दिष्ट आयाम (मेरे उदाहरण में चौड़ाई) है, तो छवि को 100% पर चौड़ाई बताने पर, यह कंटेनर की पूरी चौड़ाई बना देगा। autoऊंचाई पर कर देगा छवि नई चौड़ाई को ऊंचाई आनुपातिक है।

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

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

सीएसएस:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}

— jackJoe
स्रोत

41

आपको एक तरफ (जैसे ऊंचाई) को ठीक करने और दूसरे को सेट करने की आवश्यकता है auto।

उदाहरण के लिए

 height: 120px;
 width: auto;

यह केवल एक पक्ष के आधार पर छवि को स्केल करेगा। यदि आपको छवि स्वीकार्य लगती है, तो आप बस सेट कर सकते हैं

overflow: hidden;

मूल तत्व के लिए, जो किसी भी चीज़ को काट देगा, जो अन्यथा उसके आकार से अधिक होगा।

— निक एंड्रियोपोलोस
स्रोत

मैंने यह कोशिश की है, लेकिन यह अभी भी मुझे ऐसी छवियां देता है जो सभी अलग-अलग आकार और आकार की हैं, मैं चाहता हूं कि गैलरी समान हो, [] [] [] [] [पसंद नहीं] [] [] [] [] []

— बेनी

2

उपरोक्त दोनों के संयोजन का उपयोग करें: एक संख्या को ऊंचाई सेट करें (पैमाने रखने के लिए ऑटो चौड़ाई के साथ), और overflow: hiddenअतिरिक्त फसल के लिए माता-पिता को एक विशिष्ट चौड़ाई तक सीमित करें

— निक एंड्रियोपोलोस

25

आप object-fitसीएसएस 3 संपत्ति का उपयोग कर सकते हैं, कुछ ऐसा

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

स्निपेट का विस्तार करें

यह वास्तव में आपका जवाब नहीं है, हालांकि, इसके कारण कंटेनर में खिंचाव नहीं होता है, लेकिन यह गैलरी की तरह व्यवहार करता है और आप imgखुद को स्टाइल रख सकते हैं ।

इस समाधान का एक और दोष अभी भी css3 संपत्ति का एक खराब समर्थन है। अधिक विवरण यहां उपलब्ध हैं: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ । jQuery समाधान वहाँ भी पाया जा सकता है।

— dmitry_romanov
स्रोत

धन्यवाद, अच्छा समाधान। :)

— Bibhu

यह थोड़े गुण वाली संपत्ति के साथ जवाब देने के लिए थोड़े अजीब है जो केवल ओपेरा एटीएम में समर्थित है ?! caniuse.com/object-fit

— साइमन ड्रग्सबाक

4

मैं आपकी बात देखता हूं, @Simon, धन्यवाद। मैंने उल्लेख किया है कि मुझे पता नहीं है कि क्या संपत्ति को हर जगह समर्थन किया जाएगा, लेकिन भले ही यह नहीं होगा , हम इसे वैकल्पिक स्थानों के लिए Google के लिए शुरुआती बिंदु के रूप में उपयोग कर सकते हैं जो इसे प्रतिस्थापित करते हैं। पोस्ट करने का एक अन्य कारण यह है कि उत्तर कुछ समय के लिए रहेगा जबकि ब्राउज़र हर दिन बेहतर हो रहे हैं, इसलिए मैंने उत्तर दिया कि निकट भविष्य में भी यह लक्ष्य होगा ।

— dmitry_romanov 5

1

कई साल बाद इस पृष्ठ पर आकर मुझे इस 'भविष्य' का उत्तर पाकर खुशी हुई!

— पेटीज

8

छवियों को समायोज्य / लचीला बनाने के लिए आप इसका उपयोग कर सकते हैं:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

— स्टानिस्लाव
स्रोत

5

इसे अपने धारक जैसे पृष्ठभूमि पर रखें

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
&nbsp;
</div>

यह आपकी छवि को 120x120 डिव के अंदर छवि के किसी भी अतिरिक्त को काट देगा

— DickieBoy
स्रोत

2

यदि आप छवि को फैलाना नहीं चाहते हैं, तो इसे अतिप्रवाह के बिना div कंटेनर में फिट करें और यदि आवश्यक हो तो इसे मार्जिन समायोजित करके इसे केंद्र में रखें।

छवि खराब नहीं होगी
पहलू अनुपात भी वही रहेगा।

HTML:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

सीएसएस:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

— भूषण डांगोर
स्रोत

0

transform: scale(0.5);

उदाहरण:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

देखें: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-file/nale

— महमूद के।
स्रोत

-1

यदि आपको पता चलता है कि आप अनुपात के साथ पैडिंग-बॉटम का उपयोग कर सकते हैं तो अंतर के आधार पर हाइट सेट करने के लिए प्रतिशत के साथ।

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>

— reco
स्रोत

समानुपातिक रूप से CSS का उपयोग करके छवि का आकार बदलना?

HTML:

सीएसएस:

उदाहरण: