Trong quá trình sử dụng thumb youtube làm ảnh thumb các bạn sẽ gặp tình trạng trên dưới hình sẽ có 2 viền đen dày làm cảm giác khó chịu không thẩm mỹ, nếu đưa lên web sẽ lộ 2 viền đen đó.
Có nhiều cách để che 2 viền đen đó tuy nhiên 1 số cách khi responsive sẽ bị co giãn và vẫn hiển thị viền đen khi co giãn ko đúng kích thước, vậy làm sao để hình hiên thị mất triệt để 2 viền đen trên dưới dù co giãn bất kỳ kích thước nào và vẫn giữ được ảnh gốc ko có viền đen giống như ảnh đã được crop bỏ 2 viền đen.
Chúng ta sẽ sử dụng css như sau
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Thumbnail Demo No Black Bars</title>
<style>
body {
background: #111;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.thumb-wrapper {
width: 480px;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 3px solid red;
border-radius: 10px;
}
.thumb-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
</style>
</head>
<body>
<div class=”thumb-wrapper”>
<img src=”https://img.youtube.com/vi/WEd3WRHTIoI/sddefault.jpg” alt=”YouTube Thumbnail”>
</div>
</body>
</html>