Giá trị của object-fit
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Object Fit</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { display: flex; justify-content: center; align-items: center; } div { margin: 30px; display: inline-block; } img { background-color: aqua; } .fill { object-fit: fill; } .cover { object-fit: cover; } .contain { object-fit: contain; } .scale-down { object-fit: scale-down; } .none { object-fit: none; } </style> </head> <body> <div> <div> <p>Origin image</p> <img width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh.jpg"> </div> <div> <p>Fill</p> <img class="fill" width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh.jpg"> </div> <div> <p>Cover</p> <img class="cover" width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh.jpg"> </div> <div> <p>Contain</p> <img class="contain" width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh.jpg"> </div> <div> <p>Scale-down</p> <img class="scale-down" width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh.jpg"> </div> <div> <p>None</p> <img class="none" width="400px" height="300px" src="https://freetuts.net/upload/tut_post/images/2019/03/11/1670/anh.jpg"> </div> </div> </body> </html>
PHÓNG TO