मैं सीएसएस के माध्यम से अलग-अलग ऊंचाई और चौड़ाई की सभी छवियां कैसे बना सकता हूं?

Question

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

मैं एक ऐसी डीवा करने की सोच रहा था जिसकी ऊँचाई और चौड़ाई 100px हो और फिर कुछ इसे कैसे भरें। NOt यकीन है कि कैसे करना है।

मैं यह कैसे हासिल कर सकता हूं?

Comments

div को निश्चित ऊँचाई / चौड़ाई बनाते हैं, फिर a के साथ छवियों में सामान रखते हैं overflow:none, और div के भीतर क्षैतिज / लंबवत रूप से छवि को केंद्र में रखते हैं।

— मार्क बी

@MarcB मुझे लगता है कि आपका मतलब है overflow: hidden;। :)

— २०:१६ पर ०१

@MarcB overflow:noneसीएसएस में ऐसा नहीं है । यहां तक overflow:hiddenकि समस्या का समाधान भी नहीं होगा।

— राजेश पॉल

Answer 1

अद्यतन उत्तर (IE11 समर्थन नहीं)

img {
    float: left;
    width:  100px;
    height: 100px;
    object-fit: cover;
}

<img src="http://i.imgur.com/tI5jq2c.jpg">
<img src="http://i.imgur.com/37w80TG.jpg">
<img src="http://i.imgur.com/B1MCOtx.jpg">

मूल उत्तर

.img {
    float: left;
    width:  100px;
    height: 100px;
    background-size: cover;
}

<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>

Comments

जबरदस्त जवाब! जब उपयोगकर्ता पुनरावर्तक चाहते हैं, तो कोणीय और Vue जैसी पुस्तकालयों के लिए भी काम करता है!

— मैट कैटेलियर

img के बजाय div का उपयोग seo पर प्रभाव डाल सकता है (निश्चित नहीं)

— मुहम्मद अली मंसूर

यदि आप माइक्रोटैडाटा के साथ क्षतिपूर्ति नहीं करते हैं तो @MuhammadAliMansoor। मैंने img टैग और ऑब्जेक्ट-फिट के साथ एक ही परिणाम प्राप्त करने के लिए अपना उत्तर अपडेट किया, जिसे अब अच्छा समर्थन मिला है।

— साइमन अर्नोल्ड

क्यों बिल्ली इंटरनेट पर यह सब नहीं है? यह भी% चौड़ाई के साथ काम करता है!

— लिज़

Answer 2

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

उदाहरण के लिए

<h4>Products</h4>
<ul class="products">
    <li class="crop">
        <img src="ipod.jpg" alt="iPod" />
    </li>
</ul>



.crop {
 height: 300px;
 width: 400px;
 overflow: hidden;
}
.crop img {
 height: auto;
 width: 400px;
}

इस तरह से छवि अपने कंटेनर के आकार को बनाए रखेगी, लेकिन बिना किसी अवरोध के आकार बदल देगी

Comments

यह मेरा पसंदीदा तरीका है। पृष्ठभूमि का उपयोग करने की तुलना में इसका अधिक व्यावहारिक है।

— जिलियटेक

यह निश्चित रूप से बेहतर विकल्प है, मेरी छवियां अल पर विकृत नहीं थीं

— pwborodich

Answer 3

सबसे सरल तरीका - यह छवि के आकार को वैसा ही रखेगा और दूसरे क्षेत्र को अंतरिक्ष से भर देगा, इस तरह से सभी चित्र समान निर्दिष्ट स्थान ले लेंगे, बिना स्ट्रेचिंग के छवि का आकार

.img{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}

Comments

वाह, यह वास्तव में इतना आसान था। हो सकता है कि अन्य उत्तर "सही" हों, लेकिन इसे लागू करना सबसे आसान था।

— रान्डेल आर्म्स जूनियर

इसके लिए एकमात्र चेतावनी यह है कि कोई IE11 समर्थन नहीं है।

— रोमुलौक्स

इसका उल्टा यह है कि आपकी छवियां क्रॉप नहीं हैं और न ही तिरछी हैं, लेकिन नकारात्मक पक्ष यह है कि वे अभी भी जरूरी नहीं कि एक ही आकार में दिखाई दें। ऑब्जेक्ट-फिट: स्केल-डाउन के बजाय, आप ऑब्जेक्ट-फिट: कवर भी आज़मा सकते हैं।

— विंसेंट

Answer 4

आप तत्वों object-fitको आकार देने के लिए संपत्ति का उपयोग कर सकते हैं img:

• coverकंटेनर को भरने के लिए आनुपातिक रूप से स्ट्रेच या सिकुड़ता है। यदि आवश्यक हो, तो छवि क्षैतिज रूप से खड़ी हो जाती है,
• contain समान रूप से कंटेनर के अंदर फिट करने के लिए छवि को फैला या सिकुड़ता है।
• scale-down कंटेनर के अंदर फिट होने के लिए छवि को समानुपातिक रूप से सिकोड़ता है।

.example {
  margin: 1em 0;
  text-align: center;
}

.example img {
  width: 30vw;
  height: 30vw;
}

.example-cover img {
  object-fit: cover;
}

.example-contain img {
  object-fit: contain;
}

<div class="example example-cover">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

<div class="example example-contain">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

उपरोक्त उदाहरण में: लाल परिदृश्य है, हरा रंग चित्र है और नीला वर्ग छवि है। चेकर पैटर्न में 16x16px वर्ग होते हैं।

Comments

आईई के किसी भी संस्करण के लिए काम नहीं करने के अलावा यह बहुत अच्छा है। caniuse.com/#feat=object-fit

— जमीला हक

Answer 5

बूटस्ट्रैप का उपयोग करने वालों और जिम्मेदारियों को खोना नहीं चाहते हैं, केवल कंटेनर की चौड़ाई निर्धारित नहीं करते हैं। निम्न कोड गिलेटेक पोस्ट पर आधारित है ।

index.hmtl

<div id="image_preview" class="row">  
    <div class='crop col-xs-12 col-sm-6 col-md-6 '>
         <img class="col-xs-12 col-sm-6 col-md-6" 
          id="preview0" src='img/preview_default.jpg'/>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
         more stuff
    </div>

</div> <!-- end image preview -->

style.css

/*images with the same width*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

या शैली

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}

Answer 6

आप इसे इस तरह से कर सकते हैं:

 .container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}

img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}

Answer 7

मैं इसी समस्या का हल ढूंढ रहा था, लोगो की सूची बनाने के लिए।

मैं इस समाधान के साथ आया था जो कि फ्लेक्सबॉक्स का एक सा उपयोग करता है, जो हमारे लिए काम करता है क्योंकि हम पुराने ब्राउज़रों के बारे में चिंतित नहीं हैं।

यह उदाहरण एक 100x100px बॉक्स मानता है, लेकिन मुझे पूरा यकीन है कि आकार लचीला / उत्तरदायी हो सकता है।

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 100px; height: 100px;

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

ps .: आपको कुछ उपसर्ग जोड़ने या ऑटोप्रिफ़र का उपयोग करने की आवश्यकता हो सकती है।

Answer 8

एंडी विल्किंसन के उत्तर (दूसरे एक) के आधार पर , मैंने थोड़ा सुधार किया, सुनिश्चित करें कि छवि का केंद्र दिखाया गया है (जैसे स्वीकृत उत्तर ने किया):

HTML:

<div class="crop">
   <img src="img.png">
</div>

सीएसएस:

.crop{
  height: 150px;
  width: 200px;
  overflow: hidden;
}
.crop img{
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}

Answer 9

CSS फ़ाइल में ऊंचाई और चौड़ाई पैरामीटर सेट करें

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;
    
}

Answer 10

.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

आप छवियों को div के समान आकार देंगे और आप अपने अनुसार div आकार में हेरफेर करने के लिए बूटस्ट्रैप ग्रिड का उपयोग कर सकते हैं

Answer 11

छवि का आकार div ऊंचाई और चौड़ाई पर निर्भर नहीं है,

सीएसएस में img तत्व का उपयोग करें

यहाँ css कोड है जो आपकी मदद करता है

div img{
         width: 100px;
         height:100px;
 }

यदि आप div द्वारा आकार सेट करना चाहते हैं

इसे इस्तेमाल करो

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

इस कोड के द्वारा आपका चित्र मूल आकार में दिखाई देता है, लेकिन पहले 100x100px ओवरफ़्लो दिखाएगा

Answer 12

कोड के बिना यह आपकी मदद करना मुश्किल है लेकिन यहां आपके लिए कुछ व्यावहारिक सलाह दी गई है:

मुझे संदेह है कि आपकी "छवि दीवार" में स्टाइल देने के लिए एक आईडी या क्लास के साथ कुछ प्रकार के कंटेनर हैं।

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

<body>

<div id="maincontainer">
  <div id="header"></div>

  <div id="content">
    <div id="imagewall">
      <img src"img.jpg">
<!-- code continues -->

अपनी छवि दीवार के लिए सभी छवियों पर एक आकार को स्टाइल करना, जबकि अन्य छवियों को प्रभावित नहीं करना, जैसे कि आप लोगो, आदि आसान है यदि आपका कोड ऊपर के समान सेट है।

#imagewall img {
  width: 100px;
  height: 100px; }

लेकिन अगर आपकी छवियां पूरी तरह से वर्गाकार नहीं हैं, तो वे इस विधि का उपयोग करके तिरछी हो जाएंगी।

Answer 13

अपनी सीएसएस फ़ाइल पर जाएं और अपनी सभी छवियों को निम्नानुसार आकार दें

img {
  width:  100px;
  height: 100px;
}

Comments

सरल और सीधे!

— कीवनलाउ