การเปลี่ยนขนาดรูปภาพตามสัดส่วนโดยใช้ CSS?

Question 1

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

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

ฉันได้ภาพที่มีขนาดเท่ากันทั้งหมด แต่อัตราส่วนกว้างยาวทำให้ภาพเสียหาย ไม่มีวิธีปรับขนาดคอนเทนเนอร์รูปภาพและไม่ใช้รูปภาพแทนหรือไม่ ทำให้ฉันสามารถรักษาอัตราส่วน แต่ปรับขนาดภาพให้นิ่ง (ฉันไม่รังเกียจถ้าฉันตัดภาพบางส่วนออกไป)

ขอบคุณล่วงหน้า!

Question 2

นี่เป็นปัญหาที่ทราบแล้วเกี่ยวกับการปรับขนาด CSS เว้นแต่รูปภาพทั้งหมดจะมีสัดส่วนเท่ากันคุณไม่มีทางดำเนินการผ่าน CSS ได้

แนวทางที่ดีที่สุดคือการมีคอนเทนเนอร์และปรับขนาดหนึ่งในมิติ (เหมือนกันเสมอ) ของรูปภาพ ในตัวอย่างของฉันฉันปรับขนาดความกว้าง

หากคอนเทนเนอร์มีขนาดที่ระบุ (ในตัวอย่างของฉันคือความกว้าง) เมื่อบอกให้รูปภาพมีความกว้าง 100% มันจะทำให้เต็มความกว้างของคอนเทนเนอร์ autoที่ความสูงจะทำให้ภาพมีสัดส่วนความสูงความกว้างใหม่

เช่น:

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}

Question 3

คุณต้องแก้ไขอีกด้านหนึ่ง (เช่นสูง) และการตั้งค่าอื่น ๆ autoเพื่อ

เช่น

 height: 120px;
 width: auto;

ซึ่งจะปรับขนาดภาพตามด้านเดียวเท่านั้น หากคุณพบว่าการครอบตัดรูปภาพเป็นที่ยอมรับคุณสามารถตั้งค่าได้

overflow: hidden;

ไปยังองค์ประกอบหลักซึ่งจะครอบตัดสิ่งที่เกินขนาด

Question 4

คุณสามารถใช้object-fitคุณสมบัติ css3 ได้เช่น

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

ขยายข้อมูลโค้ด

ไม่ใช่คำตอบของคุณอย่างแน่นอนเพราะมันไม่ได้ยืดตู้คอนเทนเนอร์ แต่มันก็เหมือนแกลเลอรี่และคุณสามารถจัดแต่งทรงผมimgได้

ข้อเสียเปรียบอีกประการหนึ่งของโซลูชันนี้ยังคงเป็นการสนับสนุนคุณสมบัติ css3 ที่ไม่ดี รายละเอียดเพิ่มเติมมีอยู่ที่นี่: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ โซลูชัน jQuery สามารถพบได้ที่นั่นเช่นกัน

Question 5

ในการปรับภาพ / ยืดหยุ่นคุณสามารถใช้สิ่งนี้:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}

Question 6

ใส่เป็นพื้นหลังบนตัวยึดของคุณเช่น

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
&nbsp;
</div>

สิ่งนี้จะจัดกึ่งกลางภาพของคุณภายในขนาด 120x120 div เพื่อตัดส่วนที่เกินของภาพออกไป

Question 7

หากคุณไม่ต้องการยืดรูปภาพให้ใส่ลงในคอนเทนเนอร์ div โดยไม่ให้ล้นและจัดกึ่งกลางโดยปรับระยะขอบหากจำเป็น

ภาพจะไม่ถูกครอบตัด
อัตราส่วนภาพจะยังคงเหมือนเดิม

HTML:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

Question 8

transform: scale(0.5);

ตัวอย่าง:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

ดู: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

Question 9

หากคุณทราบอัตราส่วนสเปกตรัมคุณสามารถใช้ padding-bottom กับเปอร์เซ็นต์เพื่อตั้งค่าความสูงโดยขึ้นอยู่กับค่าต่าง

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>