มีหลายวิธีในการครอบตัดรูปภาพใน CSS; อย่างไรก็ตาม วิธีที่ง่ายที่สุดและมีประสิทธิภาพมากที่สุดคือ:
การใช้ object-fit:
เมื่อใช้ object-fit: cover เราสามารถครอบตัดรูปภาพได้อย่างง่ายดายและยังคงรักษาอัตราส่วนกว้างยาวของรูปภาพไว้
คุณสามารถใช้ object-fit พร้อมกับ object-position เพื่อครอบตัดรูปภาพใน CSS ลองตั้งค่า object-fit คุณสมบัติบนรูปภาพเป็น none แล้วตั้งค่า object-position: 50% 50% . สิ่งนี้จะจัดกึ่งกลางรูปภาพในคอนเทนเนอร์ ตัวเลขแรกกำหนดระยะการวางรูปภาพจากด้านซ้าย และตัวเลขที่สองระบุว่าวางรูปภาพห่างจากด้านบนเท่าใด
การใช้ background-image:
ตั้งค่า <div> คุณต้องการให้รูปภาพของคุณมี background-image: url(<insert url here>) คุณสมบัติ. นอกจากนี้ ให้ตั้งค่า background-size เพื่อ cover เพื่อครอบตัดเพื่อให้อัตราส่วนภาพยังคงอยู่ background-position มีค่าเริ่มต้นเป็น top left .
ปัญหาเดียวของการใช้สิ่งนี้คือข้อกังวลด้านการเข้าถึง ภาพพื้นหลังไม่จำเป็นต้องอ่านโดยโปรแกรมอ่านหน้าจอ ดังนั้นหากรูปภาพที่ใช้มีความสำคัญต่อวัตถุประสงค์โดยรวมของไซต์ ฉันจะอธิบายสิ่งที่เกิดขึ้นในภาพบนหน้าเว็บของคุณหรือเลือกตัวเลือกอื่น
การใช้ความกว้างและความสูง ระยะขอบและส่วนล้น:
On the container your <img> is in (probably a <div> บางอย่าง) ตั้งค่าตำแหน่งเป็นญาติและล้นเพื่อซ่อน ตำแหน่งสัมพัทธ์จะวางรั้วไว้รอบๆ รูปภาพ ดังนั้นจึงมีขอบเขตที่ชัดเจน จากนั้นคุณสมบัติล้นจะซ่อนทุกสิ่งที่อยู่นอกเหนือรั้วนั้น
ฉันได้สาธิตวิธีต่างๆ ที่คุณสามารถครอบตัดรูปภาพของคุณในโปรแกรมแก้ไขโค้ดด้านล่าง:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
h3 {
text-align: center;
margin: 20px;
padding: 20px;
border-top: 1px solid black;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div > div {
max-width: 500px;
width: 100%;
align-self: center;
position: relative;
overflow: hidden;
}
img {
width: 100%;
}
div.crop-top img {
margin: -20% auto 0;
}
div.crop-bottom img {
margin: 0 auto -20%;
}
div.crop-vertically img {
margin: -20% auto -20%;
}
div.crop-right img {
width: 120%;
margin: 0 -20% 0 0;
}
div.crop-left img {
width: 120%;
margin: 0 0 0 -20%;
}
div.crop-horizontally img {
width: 180%;
margin: 0 -20% 0;
height: 500px;
}
div.crop-square img {
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<h3>Normal</h3>
<div>
<img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Top Cropped</h3>
<div class="crop-top">
<img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Bottom Cropped</h3>
<div class="crop-bottom">
<img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Bottom and Top Cropped</h3>
<div class="crop-vertically">
<img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Right Cropped</h3>
<div class="crop-right">
<img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Left Cropped</h3>
<div class="crop-left">
<img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Left and Right Cropped</h3>
<div class="crop-horizontally">
<img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Square Crop</h3>
<div class="crop-square">
<img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
</div>
</body>
</html>
อย่าลืมดูแอตทริบิวต์ชื่อคลาสใน HTML แล้วดู CSS ที่ตรงกันเพื่อทำความเข้าใจว่าระยะขอบถูกตั้งค่าให้แสดงส่วนของรูปภาพที่เราต้องการดูอย่างไร
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
