CSS แสดงรูปภาพที่ปรับขนาดและครอบตัด


333

ฉันต้องการแสดงรูปภาพจาก URL ที่มีความกว้างและความสูงแม้ว่ามันจะมีอัตราส่วนขนาดที่แตกต่างกัน ดังนั้นฉันต้องการปรับขนาด (รักษาอัตราส่วน) แล้วตัดภาพให้มีขนาดที่ฉันต้องการ

ฉันสามารถปรับขนาดด้วยimgคุณสมบัติhtml และสามารถตัด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>


ฉันจะทำทั้งสองอย่างได้อย่างไร
ปรับขนาดภาพแล้วตัดตามขนาดที่ฉันต้องการหรือไม่

คำตอบ:


474

คุณสามารถใช้ทั้งสองวิธีร่วมกันเช่น

    .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/>ภาพภายใน


9
โปรดทราบว่าถ้าคุณตั้งตำแหน่ง: สัมพันธ์กับภาพที่มีอยู่คุณจะต้องกำหนดตำแหน่ง: สัมพันธ์กับ div ที่มี หากคุณไม่พบฉันพบว่า IE จะไม่ตัดภาพ
Frank Schwieterman

ลบความสูงออกจากชั้น. img img
Waqar Alamgir

@ waqar-alamgir มันจะไม่ทำงานถ้าคุณเอาการประกาศความสูงออกมา
roborourke

6
โปรดทราบว่าเมื่อใช้ css เพื่อครอบตัดรูปภาพผู้ใช้ยังคงต้องดาวน์โหลดรูปภาพ อาจเป็นการดีกว่าถ้าใช้ php และ GD หรือไลบรารีการแก้ไขรูปภาพอื่นเพื่อปรับขนาดและครอบตัดรูปภาพก่อนที่จะส่งไปยังผู้ใช้ ทุกอย่างขึ้นอยู่กับสิ่งที่คุณต้องการโหลดเซิร์ฟเวอร์หรือแบนด์วิธผู้ใช้
J-Rou

15
เพียงหมายเหตุสำหรับคนอื่น ๆ : .crop ความสูงและความกว้างกำหนดตำแหน่งที่จะเชือดส่วนล่างสุดและขวาสุดของภาพ .crop img ความสูงและความกว้างจะปรับขนาดของภาพ .crop img margin จะเลื่อนภาพ
เฟรดเดอริก

138

ด้วย CSS3 มันเป็นไปได้ที่จะเปลี่ยนขนาดของที่background-imageมีbackground-sizeตอบสนองเป้าหมายทั้งสองในครั้งเดียว

มีตัวอย่างมากมายในcss3.info

ดำเนินการขึ้นอยู่กับตัวอย่างของคุณโดยใช้donald_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>


1
วิธีแก้ปัญหาที่ยอดเยี่ยม แต่มีข้อแม้อย่างหนึ่งคือไม่เข้ากันได้กับ IE <9 (หากเรื่องนั้นสำคัญกับใครอีกต่อไป) นอกจากนี้ฉันอยากจะพูดถึงถ้าคุณเปลี่ยนฝาครอบด้วยบรรจุสำหรับขนาดพื้นหลังมันจะปรับขนาด แต่ไม่ครอบตัดภาพ
devnate

4
สำหรับ<img />แท็กดูที่object-fit: coverเกี่ยวข้องและค่าจากค่าภาพ CSS และเนื้อหาแทนที่โมดูล Level 3 สเปค
Joel Purra

110

คุณพยายามใช้สิ่งนี้หรือไม่?

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

ฉันต้องการปรับขนาดภาพจัดกึ่งกลาง (ทั้งแนวตั้งและแนวนอน) และตัดส่วนเกิน

ฉันมีความสุขที่ได้พบว่าสามารถทำได้ใน css-line เดียว ตรวจสอบตัวอย่างได้ที่นี่: 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">


2
ขอบคุณฉันคิดว่านี่เป็นวิธีที่ง่ายที่สุดและเป็นสากลที่สุดในการไป - แต่ดูเหมือนจะไม่ทำงานกับ IE: / ค้นหาเอกสารที่นี่: developer.mozilla.org/de/docs/Web/CSS/object-fit
mozzbozz

2
ไม่รองรับวัตถุแบบ CSS3 โดย IE11 หรือ EDGE (14) caniuse.com/#feat=object-fit
น่าแปลกใจที่

1
@ น่าแปลกใจที่มีการสนับสนุนใน Edge 16 ที่กำลังจะออกมา ถ้ามันไม่สำคัญและใช้เท่าที่จำเป็นก็สามารถใช้ได้ในวันนี้
Ray Foss

ใน CSS3 เราสามารถลองวิธี img + object-fit หรือ div + background-image ในภาพพื้นหลังประสบการณ์ของฉันสามารถใช้เพื่อให้พอดีกับเงื่อนไขเพิ่มเติม
Eric

1
ณ ตอนนี้สิ่งนี้ได้รับการสนับสนุนจาก Edge (ไม่รู้ตั้งแต่เมื่อไหร่)
Gerald Schneider

20
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}
<div class="imgContainer">
  <img src="imageSrc" />
</div>

div ที่บรรจุด้วยการครอบตัดรูปภาพเป็นหลักโดยการซ่อนโอเวอร์โฟลว์



8

ขอบคุณ sanchothefat

ฉันมีการปรับปรุงคำตอบของคุณ เนื่องจากการครอบตัดได้รับการปรับแต่งให้เหมาะสมกับภาพทุกภาพคำจำกัดความนี้ควรอยู่ที่ HTML แทนที่จะเป็น CSS

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


6

object-fitอาจช่วยคุณถ้าคุณกำลังเล่นกับ<img>แท็ก

รหัสด้านล่างจะครอบตัดรูปภาพให้คุณ คุณสามารถเล่นกับวัตถุได้พอดี

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

มันทำให้วันของฉัน - ฉันสามารถแนบสิ่งนี้ไปยังสไลด์ในการติดตั้งสไลด์แบบสไลด์เรียบ - การแก้ปัญหาวัตถุ IMG ธรรมดาและไม่ได้สัมผัสกับ "ฐานรหัสของตัวเลื่อนปลั๊กอิน"
andreas-supersmart

นั่นเป็นข้อได้เปรียบของ CSS :)
Hidayt Rahman

5

ตัวอย่างสด: https://jsfiddle.net/de4Lt57z/

HTML:

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

CSS:

    .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/


4

ในคลาสครอบตัดวางขนาดรูปภาพที่คุณต้องการให้ปรากฏ:

.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>

3
<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;
}

1

คุณสามารถใส่แท็ก img ในแท็ก div และทำทั้งสองอย่าง แต่ฉันขอแนะนำให้ปรับขนาดรูปภาพในเบราว์เซอร์ มันใช้เวลาส่วนใหญ่เพราะเบราว์เซอร์มีอัลกอริธึมการปรับขนาดที่ง่ายมาก ดีกว่าที่จะทำมาตราส่วนของคุณใน Photoshop หรือ ImageMagick ก่อนจากนั้นให้บริการกับลูกค้าที่ดีและน่ารัก


1

สิ่งที่ฉันได้ทำคือการสร้างสคริปต์ฝั่งเซิร์ฟเวอร์ที่จะปรับขนาดและครอบตัดรูปภาพที่ส่วนท้ายของเซิร์ฟเวอร์ดังนั้นมันจะส่งข้อมูลน้อยลงใน interweb

มันค่อนข้างเล็กน้อย แต่ถ้าใครสนใจฉันสามารถขุดและโพสต์โค้ด (asp.net)


CGI น่าจะเป็นวิธีการพกพาที่สุด (และแบนด์วิดธ์ที่มีประสิทธิภาพ) เว้นแต่ OP ตั้งใจที่จะอนุญาตให้ผู้ใช้ทำการปรับขนาดและครอบตัดผ่าน Javascript
แปลกหน้า

1

มีบริการเช่น 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]

ป้อนคำอธิบายรูปภาพที่นี่


ปลั๊กอินที่ดีอาจจะ - แต่อย่างเท่าเทียมกัน - บริการที่ยอดเยี่ยม (ไม่ฉันไม่ได้จ่ายเงินเพื่อพูดสิ่งนี้ ;-)) - ฉันเพิ่งสมัครใช้งานและมันก็ค่อนข้างดี
Jonathan Lyon

1

ลองใช้clip-pathคุณสมบัติ:

คุณสมบัติคลิปเส้นทางช่วยให้คุณสามารถคลิปองค์ประกอบเป็นรูปร่างพื้นฐานหรือไปยังแหล่งที่มาของ SVG

หมายเหตุ: คุณสมบัติเส้นทางคลิปจะแทนที่คุณสมบัติคลิปที่คัดค้าน

img {
  width: 150px;
  clip-path: inset(30px 35px);
}
<img src="http://i.stack.imgur.com/wPh0S.jpg">

ตัวอย่างเพิ่มเติมที่นี่


0
<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*/
}

0

หากคุณกำลังใช้เงินทุนให้ลองใช้{ background-size: cover; }สำหรับ<div>บางทีให้ div ที่พูดชั้น<div class="example" style=url('../your_image.jpeg');>ดังนั้นมันจะกลายเป็น div.example{ background-size: cover}


0

ฉันต้องทำสิ่งนี้เร็ว ๆ นี้ ฉันต้องการสร้างลิงก์รูปขนาดย่อไปยังกราฟ NOAA เนื่องจากกราฟของพวกเขาสามารถเปลี่ยนแปลงได้ตลอดเวลาฉันต้องการให้ภาพขนาดย่อของฉันเปลี่ยนแปลงได้ แต่มีปัญหาเกี่ยวกับกราฟของพวกเขา: มันมีขอบสีขาวขนาดใหญ่ที่ด้านบนดังนั้นหากคุณเพิ่งปรับขนาดเพื่อให้รูปขนาดย่อที่คุณท้ายด้วยช่องว่างภายนอกในเอกสาร

นี่คือวิธีที่ฉันแก้ไขมัน:

http://sealevel.info/example_css_scale_and_crop.html

ก่อนอื่นฉันต้องทำเลขคณิตนิดหน่อย ภาพต้นฉบับจาก NOAA คือ 960 × 720 พิกเซล แต่เจ็ดสิบพิกเซลด้านบนเป็นพื้นที่เส้นขอบสีขาวที่ไม่จำเป็น ฉันต้องการรูปขนาดย่อ 348 × 172 โดยไม่มีพื้นที่ชายแดนพิเศษที่ด้านบน นั่นหมายถึงส่วนที่ต้องการของภาพต้นฉบับคือ 720 - 70 = 650 พิกเซลสูง ฉันต้องการลดขนาดลงเหลือ 172 พิกเซลเช่น 172/650 = 26.5% นั่นหมายความว่าจำเป็นต้องลบ 26.5% ของ 70 = 19 พิกเซลของพิกเซลจากด้านบนของภาพที่ปรับขนาด

ดังนั้น…

  1. ตั้งความสูง = 172 + 19 = 191 พิกเซล:

    height = 191

  2. ตั้งค่าระยะขอบด้านล่างเป็น -19 พิกเซล (ย่อรูปภาพให้สูงถึง 172 พิกเซล):

    ขอบล่าง: -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 อย่างไรก็ตามนั่นไม่ใช่ปัญหาสำหรับฉัน


0

คุณสามารถใช้ Kodem ของการปรับขนาดภาพบริการ คุณสามารถปรับขนาดภาพใด ๆ ด้วยการโทร http สามารถใช้งานได้อย่างสบาย ๆ ในเบราว์เซอร์หรือใช้ในแอปผลิตของคุณ

  • อัปโหลดภาพที่ไหนก็ได้ที่คุณต้องการ (S3, imgur ฯลฯ )
  • เสียบเข้ากับ URL API เฉพาะของคุณ (จากแดชบอร์ดของเรา)
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.