कैसे स्वचालित रूप से फसल और एक छवि केंद्र

Question

किसी भी मनमानी छवि को देखते हुए, मैं छवि के केंद्र से एक वर्ग को क्रॉप करना चाहता हूं और किसी दिए गए वर्ग के भीतर प्रदर्शित करना चाहता हूं।

यह प्रश्न इसके समान है: CSS Display a Image Resized and Cropped , लेकिन मुझे छवि का आकार नहीं पता है इसलिए मैं मार्जिन का उपयोग नहीं कर सकता।

Comments

तत्व एक छवि टैग होना चाहिए, या यह पृष्ठभूमि-छवि संपत्ति के साथ एक div हो सकता है?

— रस फेर्री

जब तक मैं अपने टेम्प्लेटिंग सिस्टम के माध्यम से छवि सेट कर सकता हूं, तब तक कोई फर्क नहीं पड़ता। बदसूरत की तरह है, लेकिन मुझे लगता है कि इनलाइन शैलियों काम करेंगे।

— जोनाथन ओंग

Answer 1

एक समाधान क्रॉप्ड आयामों में एक तत्व आकार के भीतर केंद्रित पृष्ठभूमि छवि का उपयोग करना है।

---

मूल उदाहरण

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
</div>

---

उदाहरण के साथ imgटैग के

यह संस्करण imgटैग को बनाए रखता है ताकि हम छवि को बचाने के लिए खींचने या राइट-क्लिक करने की क्षमता न खोएं। अपारदर्शिता चाल के लिए पार्कर बेनेट को श्रेय ।

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Set the image to fill its parent and make transparent */
.center-cropped img {
  min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0;
}

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
  <img src="http://placehold.it/200x200" />
</div>

---

object-fit/-position

समर्थित ब्राउज़र देखें ।

CSS3 के चित्र विनिर्देश को परिभाषित करता है object-fitऔर object-positionगुण है जो एक साथ पैमाने पर अधिक नियंत्रण और एक की छवि सामग्री के पद के लिए अनुमति देने के imgतत्व। इनके साथ, वांछित प्रभाव को प्राप्त करना संभव होगा:

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}

<img class="center-cropped" src="http://placehold.it/200x200" />

Comments

आप background-size: cover;मूल पहलू अनुपात को बनाए रखते हुए छवि को सिकोड़ने या भरने के लिए उपयोग कर सकते हैं ।

— निक

बैकग्राउंड-इमेज का उपयोग करते समय आपको बैकग्राउंड-साइज़ जोड़ना चाहिए: क्रॉप्ड

— Kris Erickson

मुझे बताया गया है nowdays गूगल पारदर्शी और छिपा छवियों के बारे में जानता है कि, इसलिए imgकी altचींटी titleगुण आपके एसईओ के लिए खो जाएगा।

— विक्टर सर्जिएंको

वेबकिट में आप object-fit: cover;सीधे img टैग पर भी उपयोग कर सकते हैं जो थोड़ा अधिक अर्थपूर्ण लगता है।

— बेन

मैंने ऑब्जेक्ट-फिट का उपयोग किया: पहलू अनुपात खोने के अपने वांछित प्रभाव को प्राप्त करने के लिए कवर, वर्ग को कवर करना, और यदि आवश्यक हो तो फसल

— डैनियल हंडोजो

Answer 2

मैं एक शुद्ध सीएसएस समाधान की तलाश कर रहा था img टैग (पृष्ठभूमि छवि का तरीका नहीं)।

मुझे सीएसएस के साथ फसल थंबनेल पर लक्ष्य प्राप्त करने का यह शानदार तरीका मिला :

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

यह @Nathan Redblur के उत्तर के समान है, लेकिन यह पोर्ट्रेट छवियों के लिए भी अनुमति देता है।

मेरे लिए एक आकर्षण की तरह काम करता है। केवल एक चीज जो आपको छवि के बारे में जानने की आवश्यकता है, वह यह है कि .portraitकक्षा को निर्धारित करने के लिए यह चित्र या परिदृश्य है इसलिए मुझे इस भाग के लिए जावास्क्रिप्ट का थोड़ा उपयोग करना पड़ा।

Comments

बस इस बात से अवगत रहें कि CSS ट्रांसफ़ॉर्म केवल IE 9 और इसके बाद के संस्करण में उपलब्ध हैं।

— साइमन ईस्ट

इसका उत्तर होना चाहिए।

— वेस मोड्स

ओपी ने कहा कि "मनमानी छवि" तो ऊपर-सामने पता नहीं चलता अगर छवि चौड़ी होती।

— opyate

यदि आप न्यूनतम ऊंचाई डालते हैं: 100%; न्यूनतम चौड़ाई: 100%; ऊंचाई के बजाय: 100%; चौड़ाई: ऑटो; आपको img.portrait class की आवश्यकता नहीं है।

— 205 बजे user570605

सबसे अच्छा समाधान @ user570605 सुझाव के साथ संयुक्त

— albanx

Answer 3

इसे आज़माएं: अपनी छवि फसल आयाम सेट करें और अपने सीएसएस में इस लाइन का उपयोग करें:

object-fit: cover;

Comments

बहुत अच्छी तरह से समर्थित नहीं है: caniuse.com/#feat=object-fit EDIT: वास्तव में, हमेशा की तरह, केवल एमएस ब्राउज़र इस पर विफल होते हैं ... यह हालांकि उपयोग का एक बहुत हिस्सा दर्शाता है: /

— ब्रायन एच।

यह वही है जो मुझे चाहिए :)

— hcarreras

केवल व्यापक रूप से उपयोग किए जाने वाले ब्राउज़र जो इस का समर्थन नहीं करते हैं वे हैं इंटरनेट एक्सप्लोरर 11 और एज। आपके दर्शकों के आधार पर, अभी समर्थन लगभग 85-90% है, जो कुछ परिदृश्यों के लिए इसे व्यवहार्य बना सकता है।

— हस्की

राजा! जबरदस्त उपाय !!

— itzhar

इस बारे में एक अच्छा ट्यूटोरियल है: मध्यम.com

— पिएत्रो ला ग्रोटा

Answer 4

imgटैग के साथ उदाहरण लेकिन बिनाbackground-image

यह समाधान imgटैग को बनाए रखता है ताकि हम छवि को बचाने के लिए खींचने या राइट-क्लिक करने की क्षमता न खोएं लेकिन बिना background-imageकेंद्र और फसल के बिना सीएसएस के बिना ।

बहुत हाइट चित्रों को छोड़कर पहलू अनुपात को ठीक रखें। (लिंक की जाँच करें)

(कार्रवाई में देखें)

मार्कअप

<div class="center-cropped">
    <img src="http://placehold.it/200x150" alt="" />
</div>

सीएसएस

div.center-cropped {
  width: 100px;
  height: 100px;
  overflow:hidden;
}
div.center-cropped img {
  height: 100%;
  min-width: 100%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

Comments

यह एक कोशिश करो ... अगर छवि कंटेनर से छोटी है, तो यह केंद्र होगा, अन्यथा यह jsfiddle.net/3ts4rm24/1 पर

— Knf

Answer 5

मैंने @ रस और @ एलेक्स के उत्तरों का उपयोग करके एक कोणीय निर्देश बनाया

2014 और उसके बाद दिलचस्प हो सकता है: पी

एचटीएमएल

<div ng-app="croppy">
  <cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image>
</div>

js

angular.module('croppy', [])
  .directive('croppedImage', function () {
      return {
          restrict: "E",
          replace: true,
          template: "<div class='center-cropped'></div>",
          link: function(scope, element, attrs) {
              var width = attrs.width;
              var height = attrs.height;
              element.css('width', width + "px");
              element.css('height', height + "px");
              element.css('backgroundPosition', 'center center');
              element.css('backgroundRepeat', 'no-repeat');
              element.css('backgroundImage', "url('" + attrs.src + "')");
          }
      }
  });

फिडल लिंक

Comments

हिया डाउनवोटर्स। कृपया एक टिप्पणी छोड़ दें ताकि अगर कोई गलती हो तो मैं अपना जवाब अपडेट कर सकूं। मुझे गलत जानकारी देना पसंद नहीं है। चीयर्स।

— मकारोनक्रूज़

एक नीच नहीं, लेकिन यह एक कोणीय सवाल नहीं है और आपका जवाब अप्रासंगिक है। @pferdefleisch

— 14

@ समाधि जो समझ में आती है। यह 3 साल हो गया है और यह शायद थोड़ा बाहर जगह या अप्रिय लग रहा है। मैं इसे छोड़ दूँगा, क्योंकि मेरी टिप्पणी पर अपवोट्स ने मुझे बताया कि कम से कम कुछ लोगों को यह उपयोगी लग सकता है (या वे बिना टिप्पणियों के डाउनवोट पसंद नहीं करते हैं)।

— मावरोनक्रूज़

Answer 6

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

#yourElementId
{
    background: url(yourImageLocation.jpg) no-repeat center center;
    width: 100px;
    height: 100px;
}

ध्यान रखें कि widthऔर heightअगर आपके डोम तत्व लेआउट है (एक ब्लॉक, तत्व दिखाया गया है एक तरह केवल काम करेंगे divया एक img)। यदि यह नहीं है (एक अवधि, उदाहरण के लिए), display: block;सीएसएस नियमों में जोड़ें । यदि आपके पास CSS फाइलों तक पहुंच नहीं है, तो तत्व में शैलियों को इनलाइन छोड़ दें।

Comments

ज्यादातर मामलों में, इस सीएसएस का उपयोग विभिन्न छवियों के साथ बार-बार किया जाता है। इसलिए, पृष्ठभूमि छवि इनलाइन सेट करना अपरिहार्य है।

— रैप्टर

Answer 7

एक और तरीका है जिससे आप छवि को केंद्रित कर सकते हैं:

.thumbnail{position: relative; overflow: hidden; width: 320px; height: 640px;}
.thumbnail img{
    position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px;
    width: auto !important; height: 100% !important; margin: auto;
}
.thumbnail img.vertical{width: 100% !important; height: auto !important;}

केवल एक चीज जो आपको चाहिए वह है "वर्टिकल" को वर्टिकल इमेज में जोड़ना, आप इसे इस कोड के साथ कर सकते हैं:

jQuery(function($) {
    $('img').one('load', function () {
        var $img = $(this);
        var tempImage1 = new Image();
        tempImage1.src = $img.attr('src');
        tempImage1.onload = function() {
            var ratio = tempImage1.width / tempImage1.height;
            if(!isNaN(ratio) && ratio < 1) $img.addClass('vertical');
        }
    }).each(function () {
        if (this.complete) $(this).load();
    });
});

नोट: "महत्वपूर्ण" का उपयोग img टैग पर संभावित चौड़ाई, ऊंचाई की विशेषताओं को ओवरराइड करने के लिए किया जाता है।