71. RWD Image Trong CSS Responsive

RWD Image trong CSS Responsive:

Trong Responsive Web Design (RWD), việc làm cho hình ảnh phản ánh kích thước màn hình và thiết bị là một phần quan trọng để tạo trải nghiệm tốt hơn cho người dùng. Điều này thường được thực hiện bằng cách sử dụng CSS để điều chỉnh kích thước của hình ảnh để phù hợp với kích thước màn hình hiển thị.

Dưới đây là một ví dụ về cách điều chỉnh hình ảnh trong RWD:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
    }

    .image-container img {
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img src="your-image.jpg" alt="Responsive Image">
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta tạo một phần tử .image-container để đặt hình ảnh và điều chỉnh kích thước của nó.
Sử dụng max-width: 800px; để giới hạn kích thước tối đa của .image-container để tránh hình ảnh trở nên quá lớn trên các màn hình rộng.
Trong phần tử .image-container img, sử dụng max-width: 100%; để làm cho hình ảnh co lại theo kích thước của .image-container. Thuộc tính height: auto; giúp hình ảnh tự động thay đổi chiều cao để giữ nguyên tỷ lệ.

Khi kích thước màn hình thay đổi, hình ảnh sẽ tự động thay đổi kích thước để phù hợp với không gian hiển thị, giúp tạo trải nghiệm tốt hơn trên các thiết bị khác nhau.

Leave a Comment Cancel Reply