सीएसएस एक छवि का आकार बदला और क्रॉप किया गया

Question

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

मैं html imgप्रॉपर्टी के साथ आकार बदल सकता हूं और मैं साथ में कटौती कर सकता हूं background-image।
मैं दोनों कैसे कर सकता हूं?

उदाहरण:

यह तस्वीर:

का आकार 800x600पिक्सेल है और मैं 200x100पिक्सेल की छवि की तरह दिखाना चाहता हूं

साथ imgमैं छवि का आकार कर सकते हैं 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

यह मुझे देता है:

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

और background-imageमैं छवि 200x100पिक्सेल के साथ कटौती कर सकता हूं ।

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

मुझे देता है:

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

मैं दोनों कैसे कर सकता हूं?
छवि का आकार बदलें और फिर इसे मेरे इच्छित आकार में कटौती करें?

Answer 1

आप दोनों तरीकों के संयोजन का उपयोग कर सकते हैं।

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

आप marginछवि को चारों ओर ले जाने के लिए ऋणात्मक का उपयोग कर सकते हैं <div/>।

Comments

ध्यान दें कि यदि आप स्थिति सेट करते हैं: निहित छवि पर सापेक्ष, आपको स्थिति सेट करने की आवश्यकता होगी: युक्त div पर रिश्तेदार। यदि आप नहीं करते हैं, तो मैंने पाया है कि IE वास्तव में छवि को क्लिप नहीं करेगा।

— फ्रैंक श्वेतेरमैन

ऊँचाई को भी हटा दें .crop img class

— वकार आलमगीर

@ वकार-आलमगीर यदि आप ऊंचाई घोषणा हटाया कार्य नहीं करेगा

— roborourke

यह भी ध्यान दें कि छवि को क्रॉप करने के लिए सीएसएस का उपयोग करते समय, उपयोगकर्ता को अभी भी छवि को डाउनलोड करना होगा। उपयोगकर्ता को भेजने से पहले छवि को आकार देने और क्रॉप करने के लिए php और GD या किसी अन्य छवि संपादन लाइब्रेरी का उपयोग करना बेहतर हो सकता है। यह सब उस पर निर्भर करता है जो आप चाहते हैं, सर्वर या उपयोगकर्ताओं को लोड करना।

— जे-राऊ

बस दूसरों के लिए एक नोट:। ऊँचाई और चौड़ाई यह परिभाषित करती है कि छवि के सबसे निचले और दाएं-सबसे हिस्से को कहाँ पर स्लाइस करना है। .crop img ऊंचाई और चौड़ाई छवि को स्केल करेगी। .crop img मार्जिन इमेज को पैन करेगा

— फ्रेडरिक

Answer 2

CSS3 के background-imageसाथ background-size, एक साथ दोनों लक्ष्यों को पूरा करने के साथ , आकार को बदलना संभव है ।

कर रहे हैं उदाहरण के एक गुच्छा पर css3.info ।

डोनाल्ड_duck_4.jpg का उपयोग करके अपने उदाहरण के आधार पर लागू किया गया । इस मामले में, background-size: cover;बस वही है जो आप चाहते हैं - यह background-imageयुक्त के पूरे क्षेत्र को कवर करने के लिए फिट बैठता है <div>और अतिरिक्त क्लिप करता है (अनुपात के आधार पर)।

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

<div class="with-bg-size">Donald Duck!</div>

css3 पृष्ठभूमि छवि पृष्ठभूमि आकार

Comments

महान समाधान, लेकिन एक चेतावनी यह है कि यह IE <9 के साथ संगत नहीं है (यदि वह किसी के लिए भी मायने रखता है)। इसके अलावा, मैं उल्लेख करना चाहता था, यदि आप पृष्ठभूमि के आकार के लिए कवर के साथ प्रतिस्थापित करते हैं, तो यह स्केल होगा, लेकिन छवि को क्रॉप नहीं करेगा।

— समर्पित करें

के लिए <img />टैग, पर नज़र object-fit: coverऔर से संबंधित मूल्यों सीएसएस छवि मूल्यों और बदला सामग्री मॉड्यूल स्तर 3 विनिर्देश ।

— जोएल पुर्रा जूल

Answer 3

क्या आपने इसका उपयोग करने की कोशिश की?

.centered-and-cropped { object-fit: cover }

मुझे छवि, केंद्र (दोनों लंबवत और क्षैतिज रूप से) और फसल की तुलना में आकार बदलने की आवश्यकता थी।

मुझे यह जानकर खुशी हुई, कि यह एक सीएसएस लाइन में किया जा सकता है। यहां उदाहरण देखें: http://codepen.io/chrisnager/pen/azWWgr/?editors=110

---

यहाँ है CSSऔरHTML उस उदाहरण से कोड:

.centered-and-cropped { object-fit: cover }

<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

Comments

धन्यवाद, मुझे लगता है कि यह सबसे आसान और सबसे सार्वभौमिक तरीका है - लेकिन यह IE के साथ काम करने के लिए प्रतीत नहीं होता है: / यहां डॉक्स ढूंढें: developer.mozilla.org/de/docs/Web/CSS/object-fit

— mozzbozz

CSS3 के ऑब्जेक्ट-फिट IE11 या EDGE (14) caniuse.com/#feat=object-fit

— eye-wonder-

@ आंख-आश्चर्य यह एज 16 में समर्थित है, जल्द ही सामने आ रहा है। यदि इसका गैर महत्वपूर्ण और विरल रूप से उपयोग किया जाता है, तो इसका इस्तेमाल आज किया जा सकता है

— रे फॉस

CSS3 में, हम या तो img + ऑब्जेक्ट-फिट या div + पृष्ठभूमि-छवि की कोशिश कर सकते हैं। अब तक मेरे अनुभव में पृष्ठभूमि-छवि का उपयोग अधिक स्थितियों को फिट करने के लिए किया जा सकता है।

— एरिक

अब तक यह भी एज द्वारा समर्थित है (हालांकि बाद से पता नहीं है)।

— गेराल्ड श्नाइडर

Answer 4

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

ओवरव्यू छिपाकर छवि को अनिवार्य रूप से क्रॉप करने वाली div।

Answer 5

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

Answer 6

धन्यवाद sanchothefat

मुझे आपके उत्तर में सुधार करना है। चूंकि फसल प्रत्येक छवि के लिए बहुत अनुरूप है, यह परिभाषा सीएसएस के बजाय HTML में होनी चाहिए।

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

Answer 7

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

Answer 8

object-fitयदि आप <img>टैग के साथ खेल रहे हैं, तो आपकी मदद कर सकते हैं

नीचे दिया गया कोड आपकी छवि को क्रॉप करेगा। आप ऑब्जेक्ट-फिट के साथ चारों ओर खेल सकते हैं

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

Comments

यह मेरा दिन बना दिया - मैं आसानी से अपने चालाक स्लाइडर हिंडोला कार्यान्वयन में एक स्लाइड को यह देते हैं सकता है - सादा आईएमजी वस्तु समाधान और "स्लाइडर प्लगइन के कोड बेस" में छू नहीं

— एंड्रियास-supersmart

यह सीएसएस का फायदा है :)

— हित रहमान

Answer 9

लाइव उदाहरण: https://jsfiddle.net/de4Lt57z/

HTML:

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

सीएसएस:

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

स्पष्टीकरण: यहाँ छवि की चौड़ाई और ऊँचाई के मान से आकार बदला गया है। और फसल क्लिप संपत्ति द्वारा की जाती है।

क्लिप संपत्ति के बारे में जानकारी के लिए अनुसरण करें: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

Answer 10

फसल वर्ग में, वह छवि आकार रखें जिसे आप दिखाना चाहते हैं:

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

Html जैसा दिखेगा:

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

Answer 11

<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

---

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

Answer 12

आप एक टैग में img टैग लगा सकते हैं और दोनों कर सकते हैं, लेकिन मैं ब्राउज़र में छवियों को स्केल करने के खिलाफ सुझाऊंगा। यह ज्यादातर समय एक घटिया काम करता है क्योंकि ब्राउज़रों में बहुत ही सरल स्केलिंग एल्गोरिदम होता है। पहले फ़ोटोशॉप या इमेजमैजिक में अपना स्केलिंग करने के लिए बेहतर है, फिर इसे क्लाइंट को अच्छे और सुंदर तरीके से परोसें।

Answer 13

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

यह काफी तुच्छ है, लेकिन अगर किसी को दिलचस्पी है, तो मैं खोद सकता हूं और कोड पोस्ट कर सकता हूं (asp.net)

Comments

CGI संभवतः सबसे पोर्टेबल विधि (और बैंडविड्थ-कुशल) है, जब तक कि ओपी उपयोगकर्ता को अपने स्वयं के आकार और जावास्क्रिप्ट के माध्यम से क्रॉप करने की अनुमति देने का इरादा नहीं करता है।

— स्ट्रैजर

Answer 14

Filestack जैसी सेवाएं हैं जो आपके लिए ऐसा करेंगी।

वे आपकी छवि url लेते हैं और आपको url मापदंडों का उपयोग करके इसे आकार बदलने की अनुमति देते हैं। यह बहुत आसान है।

200x100 के आकार के बाद लेकिन पहलू अनुपात को बनाए रखने के बाद आपकी छवि इस तरह दिखाई देगी

पूरा url ऐसा दिखता है

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

लेकिन महत्वपूर्ण हिस्सा सिर्फ है

resize=width:200/crop=d:[0,25,200,100]

Comments

अच्छा प्लग शायद - लेकिन समान रूप से - एक भयानक सेवा (नहीं, मुझे यह कहने के लिए भुगतान नहीं किया जाता है; ;-)) - मैंने सचमुच अभी साइन अप किया है और यह बहुत अच्छा है

— जोनाथन लीयोन

Answer 15

clip-pathसंपत्ति का उपयोग करने का प्रयास करें :

क्लिप-पथ प्रॉपर्टी आपको मूल आकार या एसवीजी स्रोत के लिए एक तत्व क्लिप करने देती है।

नोट: क्लिप-पथ संपत्ति को हटाए गए क्लिप गुण की जगह लेगा।

img {
  width: 150px;
  clip-path: inset(30px 35px);
}

<img src="http://i.stack.imgur.com/wPh0S.jpg">

अधिक उदाहरण यहाँ ।

Answer 16

<div class="crop">
    <img src="image.jpg"/>
</div>

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

Answer 17

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, { background-size: cover; }तो <div>हो सकता है कि डिव को एक कक्षा कहें, <div class="example" style=url('../your_image.jpeg');>ताकि वह बन जाए div.example{ background-size: cover}

Answer 18

मुझे हाल ही में ऐसा करने की जरूरत थी। मैं एनओएए ग्राफ के लिए एक थंबनेल-लिंक बनाना चाहता था। चूंकि उनका ग्राफ किसी भी समय बदल सकता है, मैं चाहता था कि मेरा थंबनेल इसके साथ बदल जाए। लेकिन उनके ग्राफ के साथ एक समस्या है: इसकी शीर्ष पर एक विशाल सफेद सीमा है, इसलिए यदि आप इसे थंबनेल बनाते हैं तो आप दस्तावेज़ में बाहरी व्हाट्सएप के साथ समाप्त होते हैं।

यहां बताया गया है कि मैंने इसे कैसे हल किया:

http://sealevel.info/example_css_scale_and_crop.html

पहले मुझे थोड़ा सा अंकगणित करने की जरूरत थी। NOAA से मूल छवि 960 × 720 पिक्सेल है, लेकिन शीर्ष सत्तर पिक्सेल एक शानदार सफेद सीमा क्षेत्र हैं। मुझे शीर्ष पर अतिरिक्त सीमा क्षेत्र के बिना 348 × 172 थंबनेल की आवश्यकता थी। इसका मतलब है कि मूल छवि का वांछित भाग 720 - 70 = 650 पिक्सेल ऊंचा है। मुझे १ needed२ पिक्सल यानी १ needed२ / ६५० = २६.५% नीचे स्केल करने की जरूरत थी। इसका मतलब है कि स्केल की गई छवि के शीर्ष से हटाए जाने के लिए पिक्सेल की 70 = 19 पंक्तियों की 26.5% की आवश्यकता होती है।

इसलिए…

1. ऊँचाई सेट करें = 172 + 19 = 191 पिक्सेल:

   ऊंचाई = 191

2. -19 पिक्सेल के निचले हिस्से को सेट करें (छवि को 172 पिक्सेल तक छोटा करें):

   margin-bottom: -19px

3. -19 पिक्सेल (छवि को ऊपर स्थानांतरित करने के लिए शीर्ष स्थान सेट करें, ताकि शीर्ष 19 पिक्सेल पंक्तियाँ अतिप्रवाह और नीचे वाले के बजाय छिपी हों):

   शीर्ष: -19px

परिणामी HTML इस तरह दिखता है:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

जैसा कि आप देख सकते हैं, मैंने युक्त <a> टैग को स्टाइल करने के लिए चुना, लेकिन आप इसके बजाय <div> स्टाइल कर सकते हैं।

इस दृष्टिकोण की एक कलाकृति यह है कि यदि आप सीमाओं को दिखाते हैं, तो शीर्ष सीमा गायब हो जाएगी। चूंकि मैं किसी भी तरह से सीमा = 0 का उपयोग करता हूं, यह मेरे लिए कोई समस्या नहीं थी।

Answer 19

आप कोडम की इमेज रिसाइज सर्विस का उपयोग कर सकते हैं । आप किसी भी इमेज को सिर्फ http कॉल के साथ बदल सकते हैं। ब्राउज़र में लापरवाही से इस्तेमाल किया जा सकता है या आपके उत्पादन ऐप में उपयोग किया जा सकता है।

• अपनी पसंद का चित्र अपलोड करें (S3, imgur आदि)
• इसे अपने समर्पित API url (हमारे डैशबोर्ड से) में प्लग करें