0
Cần Giúp Với Ạ
HTML:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="background">
<img src="img.jpg" alt="bg">
</div>
</body>
</html>
CSS:
.background {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.background img {
width: 100%;
height: 100%;
object-fit: cover;
}
Khi chạy xung quanh img có các khoảng trắng, img không được lắp đầy màn hình, mình phải làm sao đây ạ!!?
Thêm một bình luận
1 CÂU TRẢ LỜI
+1
Mình đoán cái "khoảng trắng" đó do CSS của trình duyệt. Do mặc định mỗi trình duyệt có một chuẩn riêng nên bạn cần thêm reset CSS để thiết lập lại nó.
//add
*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
}
Ngoài ra, để xác định chính xác nguyên nhân tạo ra "khoảng trắng", bạn có thể sử dụng DevTools trong Chrome. Bạn chỉ cần nhấn Ctrl + Shift + C để mở DevTools, sau đó di chuột lên "khoảng trắng" đó. DevTools sẽ hiển thị thông tin về CSS đang được áp dụng, giúp bạn xác định được loại và nguồn gốc của "khoảng trắng" đó.
