วิธี "ครอบตัด" รูปภาพสี่เหลี่ยมลงในสี่เหลี่ยมด้วย CSS ได้อย่างไร


170

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

สิ่งที่ฉันต้องการจะทำคือถ่ายภาพสี่เหลี่ยมและใช้ CSS เพื่อทำให้ปรากฏเป็นรูปสี่เหลี่ยมจัตุรัสโดยไม่บิดเบือนภาพเลย

โดยพื้นฐานแล้วฉันอยากจะเปลี่ยนสิ่งนี้:

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

เป็นนี้

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


4
ภาพเหล่านี้เป็นภาพพื้นหลังของ div หรือเป็นสิ่งสำคัญสำหรับ SEO ที่ยังคงอยู่ในแท็ก <img>
Michael

2
คุณลองทำอะไรบ้าง? สิ่งนี้ค่อนข้างง่ายด้วย CSS3 background-positionหรือ wrapper div with overflow:hiddenและ image ที่มีการวางตำแหน่งสัมพัทธ์
FabrícioMatté

พวกเขาอาจเป็นภาพพื้นหลังได้อย่างแน่นอน
novicePrgrmr

เห็นคำตอบของฉันฉันคิดว่านี่เป็นตัวเลือกที่ดีที่สุดของคุณ มันหลีกเลี่ยงองค์ประกอบตำแหน่ง
Michael

คำตอบ:


78

สมมติว่าพวกเขาไม่จำเป็นต้องอยู่ในแท็ก IMG ...

HTML:

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

CSS:

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

แก้ไข: หากกองต้องการเชื่อมโยงที่ไหนสักแห่งเพียงแค่ปรับ HTML และลักษณะดังนี้:

HTML:

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

CSS:

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

โปรดทราบว่าสิ่งนี้สามารถปรับเปลี่ยนให้ตอบสนองได้เช่น% ความกว้างและความสูงเป็นต้น


1
นี่เป็นวิธีที่ดีในการวางตำแหน่งและครอบตัดด้วยแท็กเดียว
rlemon

8
โปรดทราบด้วยว่าเมื่อพิมพ์เบราว์เซอร์เสาจะปิดใช้งานภาพพื้นหลังเพื่อไม่ให้แสดงผล
j08691

มันสามารถจัดการ: รัฐโฉบด้วย หาก div ต้องการเชื่อมโยงบางแห่งเพียงเพิ่มแท็ก สำหรับการพิมพ์นั้นสามารถแก้ไขด้วย print.css ได้หรือไม่ ช่วยแก้ให้ด้วยนะถ้าฉันผิด?
Michael

ที่จริงแล้วในกรณีนี้ด้วยแท็ก A การพิมพ์จะมีการถอยกลับและในกรณีใด ๆ คุณจะต้องเพิ่มสไตล์ CSS เพื่อแก้ไขปัญหานี้สำหรับการพิมพ์ต่อไป
Michael

1
ไม่เป็นไรฉันเปลี่ยนมันเป็นheight: 460px; width: 100%;และมันทำงานได้อย่างมีเสน่ห์
novicePrgrmr

417

โซลูชัน CSS ที่ไม่มีตัวห่อหุ้มdivหรือโค้ดไร้ประโยชน์อื่น ๆ :

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

12
โปรดทราบว่านี่ไม่ใช่การทำงานกับ IE และ Edge atm ดูรายละเอียดเพิ่มเติมที่นี่ได้ที่นี่: stackoverflow.com/a/37792830/1398056
baoutch

2
เราไม่รู้ว่าความสูงที่เราต้องการทำให้มันเป็นสี่เหลี่ยมจัตุรัสโดยอัตโนมัติคืออะไร
Aravind Reddy

3
เมื่อวันที่มิถุนายน 2018 ดูเหมือนว่ามีเพียง IE11 (2.71%) ที่ไม่รองรับการใช้วัตถุพอดีสำหรับฉัน
เรย์

1
ในปี 2019 การสนับสนุนค่อนข้างดีในขณะนี้ มีเพียง 2.3% เท่านั้นที่ยังใช้ IE 11 โซลูชันนี้ง่ายเหลือเกินฉันไม่สามารถช่วยได้ แต่ใช้เพราะคนอื่นนั้นช่างเจ็บปวดเหลือเกินที่ฉันเสียเวลาพยายามที่จะใช้มันกับรหัสแบ็กเอนด์
พอลมอร์ริส

3
ได้เวลาลืมเรื่อง IE
iji

55
  1. วางภาพของคุณใน div
  2. ให้ส่วนข้อมูลกำลังสองที่ชัดเจนของ div
  3. ตั้งค่าคุณสมบัติโอเวอร์โฟลว์ CSS บน div เป็น hidden ( overflow:hidden)
  4. ใส่จินตนาการของคุณใน div
  5. กำไร.

ตัวอย่างเช่น:

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

5
ต้องแน่ใจว่าอยู่ตรงกลางหรืออย่างน้อยก็เล่นกับการวางตำแหน่งของภาพภายใน ตัวอย่าง OP ดูที่กึ่งกลาง (แม้ว่าฉันจะพูดถึงเรื่องนี้และไม่คาดหวังให้คุณเปลี่ยนคำตอบของคุณเลย: P)
rlemon

1
@rlemon - จากนั้น OP สามารถตั้งค่าตำแหน่งของ div ให้สัมพันธ์และตำแหน่งของรูปภาพเป็นสัมบูรณ์และปรับแต่งแอตทริบิวต์ด้านบนและซ้าย
j08691

6
ฉันแค่พูดถึงมันก่อนที่จะมีใครบางคนทั้งหมด; "แต่ตอนนี้ทุกอย่างอยู่ในแนวเดียวกัน!" -: P
rlemon

1
ใช่มันสำคัญมากที่จะอยู่กึ่งกลาง
novicePrgrmr

32

ใช้ขนาดพื้นหลัง: ปก - http://codepen.io/anon/pen/RNyKzB

CSS:

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

1
รวมความสามารถในการเป็นศูนย์กลางของคำตอบของ mtronics เข้ากันได้ดีแม้ใน IE9
Faker

14

ฉันเจอปัญหาเดียวกันนี้เมื่อเร็ว ๆ นี้และจบลงด้วยวิธีที่แตกต่างกันเล็กน้อย (ฉันไม่สามารถใช้ภาพพื้นหลัง) มันต้องใช้ 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>

CSS:

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');        
      }
    });

});

ฉันคิดว่าสิ่งนี้ดีกว่าพื้นหลัง CSS เพราะรูปภาพเป็นเนื้อหาไม่ใช่ "สไตล์" ดังนั้นควรเก็บไว้ในเลเยอร์ HTML นอกจากนี้ยังมีพวกเขาใน CSS แทน HTML จะมีผลต่อ SEO ของหน้าเว็บของคุณ ขอบคุณ!
Jose Florido

ความคิดที่ดีที่จะปรับปรุงสิ่งนี้คือการเพิ่ม$(this).load(function(){...เข้าไปในแต่ละลูปดังนั้น jQuery จะรอสักครู่จนกว่าภาพจะถูกโหลดและรับขนาดของภาพที่แท้จริง
Jose Florido

14

หากรูปภาพอยู่ในคอนเทนเนอร์ที่มีความกว้างตอบสนอง :

HTML

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

CSS

.img-container {
  position: relative;

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

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

นี่เป็นสิ่งที่ดีจริงๆ มันมีความยืดหยุ่นอย่างไม่น่าเชื่อเช่นกันเนื่องจากเมื่อภาพถูกยกกำลังสองแล้วคุณสามารถทำให้เป็นวงกลมและทำสิ่งดีๆอื่น ๆ
Rocky Kev

3

ฉันมีปัญหาที่คล้ายกันและไม่สามารถ "ประนีประนอม" กับภาพพื้นหลังได้ ฉันมากับสิ่งนี้

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


2

ใช้ CSS: ล้น:

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

3
ขนาดเหล่านั้นไม่มากนัก :-)
isherwood

2
ไม่ถูกต้อง ดุจ ฉันเพิ่งยกระดับความสูงที่มีอยู่จากขนาดภาพของ OP เหมือนหุ่นยนต์เผาไหม้บ่ายวันศุกร์
Diodeus - James MacFarlane

หึ ฉันอยู่กับคุณที่นั่น :-)
isherwood

1

ใช้ div ที่มีขนาดเป็นสี่เหลี่ยมจัตุรัสโดยมีภาพอยู่ด้านในด้วยคลาส. testimg:

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


0

object-fit: cover จะทำสิ่งที่คุณต้องการ

แต่มันอาจไม่ทำงานบน IE / Edge ติดตามที่แสดงด้านล่างที่จะแก้ไขได้ด้วยเพียง CSSในการทำงานในทุกเบราว์เซอร์

วิธีที่ฉันใช้คือจัดตำแหน่งภาพภายในคอนเทนเนอร์ด้วย สัมบูรณ์แล้ววางลงที่กึ่งกลางโดยใช้ชุดค่าผสม:

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%;

สิ่งนี้ทำให้ภาพได้รับผลกระทบจาก Object-fit: cover


นี่คือการสาธิตของตรรกะข้างต้น

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

ตรรกะนี้ใช้ได้กับทุกเบราว์เซอร์


รูปภาพต้นฉบับ
รูปภาพต้นฉบับ

ตัดแนวตั้ง
ภาพที่ถูกครอบตัดในแนวตั้ง

ครอบตัดแนวนอน
รูปภาพที่ครอบตัดตามแนวนอน


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