सीएसएस के साथ एक वर्ग में एक आयताकार छवि "फसल" कैसे करें?

Question

मुझे पता है कि सीएसएस के साथ वास्तव में एक छवि को संशोधित करना असंभव है, यही कारण है कि मैंने उद्धरण में फसल लगाई।

मैं जो करना चाहता हूं वह आयताकार चित्र ले रहा हूं और छवि को विकृत किए बिना उन्हें चौकोर दिखाने के लिए सीएसएस का उपयोग करता हूं।

मैं मूल रूप से इसे चालू करना चाहता हूं:

इस मामले में:

Comments

क्या ये चित्र divs की पृष्ठभूमि की छवियां हैं या क्या यह एसईओ के लिए महत्वपूर्ण है कि वे <img> टैग में बने रहें?

— माइकल

क्या आपने अभी तक कुछ भी करने की कोशिश की? यह सीएसएस 3 background-positionया पुराने आवरण के साथ overflow:hiddenऔर सापेक्ष स्थिति के साथ छवि के साथ सरल है ।

— फेब्रीसियो मैटे

वे सुनिश्चित करने के लिए पृष्ठभूमि चित्र हो सकते हैं

— novicePrgrmr

मेरा उत्तर देखें, मुझे लगता है कि यह आपका समग्र सर्वोत्तम विकल्प है। यह स्थिति तत्वों से बचा जाता है।

— माइकल

Answer 1

यह मानते हुए कि वे आईएमजी टैग में नहीं हैं ...

HTML:

<div class="thumb1">
</div>

सीएसएस:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

संपादित करें: यदि div को कहीं लिंक करने की आवश्यकता है तो HTML और शैलियाँ समायोजित करें जैसे:

HTML:

<div class="thumb1">
<a href="#">Link</a>
</div>

सीएसएस:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

ध्यान दें कि यह भी संवेदनशील होने के लिए संशोधित किया जा सकता है, उदाहरण के लिए% चौड़ाई और ऊंचाई आदि।

Comments

यह एक टैग के साथ स्थिति और फसल के लिए एक अच्छा तरीका है।

— 22:00

ध्यान दें कि मुद्रण करते समय, मस्तूल ब्राउज़र पृष्ठभूमि छवियों को अक्षम करते हैं ताकि वे दिखाई न दें।

— j08691

यह संभाल सकता है: होवर राज्यों को भी। यदि div को कहीं लिंक करना है तो केवल एक टैग जोड़ें। प्रिंट के लिए, कि print.css के साथ तय किया जा सकता है? यदि मैं गलत हूं तो मुझे सही करों?

— माइकल

वास्तव में, ईमानदार होने के लिए, इस मामले में, ए टैग के साथ प्रिंट में गिरावट होगी, और किसी भी मामले में, आप प्रिंट शैलियों के लिए इसे ठीक करने के लिए सीएसएस शैलियों को जोड़ना चाहेंगे।

— माइकल

कोई बात नहीं, मैंने इसे बदल दिया height: 460px; width: 100%;और यह एक आकर्षण की तरह काम करता है

— novicePrgrmr

Answer 2

कोई आवरण divया अन्य बेकार कोड के साथ एक शुद्ध सीएसएस समाधान :

img {
  object-fit: cover;
  width:230px;
  height:230px;
}

Comments

ध्यान दें कि यह दुर्भाग्य से IE और एज एटीएम पर काम नहीं कर रहा है। इसके बारे में अधिक जानकारी के लिए यहां देखें: stackoverflow.com/a/37792830/1398056

— baoutch

हम क्या नहीं जानते कि हम इसे ऑटो चौड़ाई के साथ चौकोर बनाना चाहते हैं

— अरविंद रेड्डी

जून 2018 तक, ऐसा लगता है कि केवल IE11 (2.71%) ऑब्जेक्ट-फिट का समर्थन नहीं करता है, मेरे लिए काफी अच्छा है।

— रे

2019 में समर्थन अब बहुत अच्छा है। केवल 2.3% अभी भी IE 11 का उपयोग कर रहे हैं। यह समाधान इतना आसान है कि मैं मदद नहीं कर सकता, लेकिन इसका उपयोग कर सकता हूं क्योंकि अन्य ऐसे दर्द हैं जो मैंने बर्बाद कर दिए हैं जो बैकएंड कोड के साथ काम करने के लिए इसे प्राप्त करने की कोशिश कर रहे हैं।

— पॉल मॉरिस

यह सब IE के बारे में भूल जाने का समय है

— 23:

Answer 3

1. अपनी छवि को एक div में रखें।
2. अपने div स्पष्ट वर्ग आयाम दें।
3. (छिपाकर) div पर सीएसएस अतिप्रवाह संपत्ति सेट करेंoverflow:hidden )।
4. Div के अंदर अपनी कल्पना रखो।
5. फायदा।

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

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>

Comments

केंद्र या कम से कम छवि की स्थिति के साथ खेलना सुनिश्चित करना चाहिए। ओपी नमूना केंद्रित दिखता है (हालांकि मैं सिर्फ इस बात का उल्लेख करता हूं और आपसे यह उम्मीद नहीं करता कि आप अपना उत्तर बिल्कुल बदल दें: पी)।

— 22 अगस्त को rlemon

@rlemon - तब ओपी सापेक्षता के लिए div की स्थिति और पूर्ण करने के लिए छवि की स्थिति निर्धारित कर सकता है, और शीर्ष और बाईं विशेषताओं को घुमा सकता है।

— j08691

मैं अभी इसका उल्लेख किसी और के सामने कर रहा हूँ; "लेकिन यह सब अब बचा हुआ है!" -: P

— rlemon

हां यह महत्वपूर्ण होगा कि यह केंद्रित है

— novicePrgrmr

Answer 4

पृष्ठभूमि-आकार का उपयोग करना: कवर - http://codepen.io/anon/pen/RNyKzB

सीएसएस:

.image-container {
  background-image: url('http://i.stack.imgur.com/GA6bB.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:250px;
  height:250px;
}  

मार्कअप:

<div class="image-container"></div>

Comments

Mtronics के जवाब की केंद्रित क्षमता को मिलाकर, यह IE9 पर भी अच्छी तरह से काम करता है।

— फकर

Answer 5

मैं वास्तव में हाल ही में इसी समस्या में आया था और थोड़ा अलग दृष्टिकोण के साथ समाप्त हुआ (मैं पृष्ठभूमि छवियों का उपयोग करने में सक्षम नहीं था)। हालांकि छवियों के उन्मुखीकरण को निर्धारित करने के लिए इसे jQuery के एक छोटे से बिट की आवश्यकता होती है (मुझे यकीन है कि आप इसके बजाय सादे JS का उपयोग कर सकते हैं)।

मैंने इसके बारे में एक ब्लॉग पोस्ट लिखा था यदि आप अधिक स्पष्टीकरण में रुचि रखते हैं लेकिन कोड बहुत सरल है:

HTML:

<ul class="cropped-images">
  <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
  <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>

सीएसएस:

li {
  width: 150px; // Or whatever you want.
  height: 150px; // Or whatever you want.
  overflow: hidden;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}
li img {
  max-width: 100%;
  height: auto;
  width: auto;
}
li img.landscape {
  max-width: none;
  max-height: 100%;
}

jQuery:

$( document ).ready(function() {

    $('.cropped-images img').each(function() {
      if ($(this).width() > $(this).height()) {
        $(this).addClass('landscape');        
      }
    });

});

Comments

मुझे लगता है कि यह सीएसएस पृष्ठभूमि विकल्प से बेहतर है क्योंकि छवियां सामग्री हैं, "शैली" नहीं, इसलिए उन्हें HTML परत पर रखा जाना चाहिए। साथ ही HTML के बजाय CSS पर होने से आपके वेबपेज के SEO पर प्रभाव पड़ेगा। धन्यवाद!

— जोस फ्लोरिडो

इसे बेहतर बनाने के लिए एक अच्छा विचार $(this).load(function(){...प्रत्येक लूप के अंदर जोड़ना है, इसलिए jQuery थोड़ी प्रतीक्षा करता है जब तक कि छवि लोड नहीं होती है और वास्तविक छवि आयाम मिलते हैं।

— जोस फ्लोरिडो

Answer 6

यदि छवि एक संवेदनशील के साथ एक कंटेनर में है चौड़ाई वाले :

एचटीएमएल

<div class="img-container">
  <img src="" alt="">
</div>

सीएसएस

.img-container {
  position: relative;

  &::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

Comments

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

— रॉकी केव

Answer 7

मेरे पास एक समान मुद्दा था और पृष्ठभूमि छवियों के साथ "समझौता" नहीं कर सकता था। मैं यह लेकर आया था।

<div class="container">
    <img src="http://lorempixel.com/800x600/nature">
</div>

.container {
    position: relative;
    width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
    border: 2px solid #fff; /* just to separate the images */
    overflow: hidden; /* "crop" the image */
    background: #000; /* incase the image is wider than tall/taller than wide */
}

.container img {
    position: absolute;
    display: block;
    height: 100%; /* all images at least fill the height */
    top: 50%; /* top, left, transform trick to vertically and horizontally center image */
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});

उम्मीद है की यह मदद करेगा!

उदाहरण: https://jsfiddle.net/cfbuwxmr/1/

Answer 8

सीएसएस का उपयोग करें: अतिप्रवाह:

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}

Comments

वे आयाम बहुत वर्गाकार नहीं हैं। :-)

— इशरवुड

नहीं, तुम सही हो। ओह। मैं ओपी की छवि के आकार से मौजूदा ऊंचाई को उठा रहा था, जैसे कुछ शुक्रवार दोपहर को जला हुआ रोबोट।

— डायोडस - जेम्स मैकफर्लेन

हे। मैं तुम्हारे साथ वहाँ हूँ। :-)

— इशरवुड

Answer 9

या तो .testimg वर्ग के साथ छवि के साथ वर्ग आयामों के साथ एक div का उपयोग करें:

.test {
width: 307px;
height: 307px;
overflow:hidden
}

.testimg {
    margin-left: -76px

}

या छवि की पृष्ठभूमि के साथ एक वर्ग div।

.test2 {
width: 307px;
height: 307px;
    background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

यहां कुछ उदाहरण दिए गए हैं: http://jsfiddle.net/QqCLC/1/

छवि केंद्रों का अद्यतन किया गया

.test {
  width: 307px;
  height: 307px;
  overflow: hidden
}

.testimg {
  margin-left: -76px
}

.test2 {
  width: 307px;
  height: 307px;
  background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>

<div class="test2"></div>

Answer 10

object-fit: cover ठीक वही करेगा जो आपको चाहिए।

लेकिन यह IE / Edge पर काम नहीं कर सकता है। सभी ब्राउज़रों पर काम करने के लिए बस सीएसएस के साथ इसे ठीक करने के लिए नीचे दिखाए अनुसार पालन करें ।

मेरे द्वारा लिया गया दृष्टिकोण कंटेनर के अंदर की छवि को पूर्ण के साथ स्थिति में लाना था और फिर इसे संयोजन का उपयोग करके केंद्र में सही जगह पर रखना था :

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

एक बार जब यह केंद्र में होता है, तो मैं छवि को देता हूं,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

इससे छवि को ऑब्जेक्ट-फिट: कवर का प्रभाव मिलता है।

---

यहाँ उपरोक्त तर्क का प्रदर्शन है।

https://jsfiddle.net/furqan_694/s3xLe1gp/

यह तर्क सभी ब्राउज़रों में काम करता है।

---

मूल छवि

खड़ी फसल

क्षैतिज रूप से फसली

---