Menu
CoddyTech
Bắt đầu học

Hình ảnh linh hoạt

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 66 trên 76.

Trong thiết kế web đáp ứng, hình ảnh linh hoạt tự động điều chỉnh để phù hợp với nhiều kích thước màn hình khác nhau, giúp chúng hiển thị đẹp trên mọi thiết bị. Nếu không linh hoạt, hình ảnh có thể quá lớn trên màn hình nhỏ hoặc làm vỡ bố cục.

Cách làm cho hình ảnh co giãn linh hoạt:

1. Sử dụng max-width trong CSS
Đặt max-width: 100% để đảm bảo hình ảnh không bao giờ rộng hơn vùng chứa.

img {
  max-width: 100%;
  height: auto; /* Giữ nguyên tỷ lệ khung hình */
}

2. Dùng đơn vị khung nhìn
Bạn có thể đặt kích thước hình ảnh bằng vw (chiều rộng khung nhìn) để hình ảnh co giãn theo kích thước màn hình.

img {
  width: 50vw; /* Hình ảnh chiếm 50% chiều rộng vùng hiển thị */
}
challenge icon

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có hình ảnh. Nhiệm vụ của bạn là làm cho hình ảnh có khả năng thích ứng để phù hợp với các kích thước màn hình khác nhau.

  1. Viết một quy tắc CSS áp dụng cho tất cả phần tử có lớp img-max. Đặt max-width thành 100% và height thành auto.
  2. Viết một quy tắc CSS áp dụng cho tất cả phần tử có lớp img-vw. Đặt width thành 50vw và height thành auto.

Tự làm thử

<html>
<head>
    <title>Flexible Images</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
     <div class="container">
        <h2>Image with max-width: 100%</h2>
        <img class="img-max" src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Adelie_penguins_in_the_South_Shetland_Islands.jpg" alt="Max-Width Image">
    </div>

    <div class="container">
        <h2>Image with width: 50vw</h2>
        <img class="img-vw" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Adelie_Penguins_on_iceberg.jpg">
    </div>
</body>
</html>
quiz iconTự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong Tạo kiểu với CSS

1Giới thiệu

CSS là gì?Cú pháp CSSChú thích CSSThẻ headThẻ title

4Nền tảng về văn bản

Màu chữPhông chữCỡ chữĐộ đậm của chữCăn chỉnh văn bảnTrang trí văn bảnThử thách ôn tập số 1Thử thách ôn tập số 2

7Mô hình hộp phần 1

Mô hình hộp là gì?Khoảng đệmLềĐường viềnChiều rộng và chiều caoThử thách ôn tập

10Biểu mẫu đăng nhập

Thân trangKhung biểu mẫuBài học dự ánÔ nhập liệuBài học dự ánNútBài học dự án

13Trang web Tonga

Menu điều hướngPhần đầu trang chào mừngBài học dự ánPhần giới thiệuBài học dự ánPhần liên hệBài học dự ánThẻ viewportBài học dự ánTruy vấn mediaBài học dự án

2Thêm CSS

CSS nội tuyếnCSS nội bộCSS bên ngoàiThử thách tạo kiểu cơ bản

5Màu sắc và hình nền

Màu nềnMàu HEXMàu RGBĐộ trong suốt với RGBAThử thách ôn tập số 1

8Mô hình hộp phần 2

Kích thước hộpBo gócTràn nội dungĐổ bóng hộpThử thách ôn tập

11Kỹ thuật bố cục

Phần tử block và inlineCơ bản về định vịĐịnh vị tương đốiĐịnh vị tuyệt đốiĐịnh vị cố địnhCơ bản về z-indexThử thách ôn tập

14Thử thách cuối

Sắp xếp các mụcDanh sách phimThiệp mời đám cướiThông báo nổi

3Bộ chọn cơ bản

Giới thiệu về bộ chọnBộ chọn kiểuBộ chọn lớpBộ chọn IDBộ chọn nhómBộ chọn phổ quátThử thách về bộ chọn

6Thực đơn quán cà phê

Kiến thức cơ bản về kiểu chữTạo kiểu văn bảnBài học dự ánMàu sắc và hình nềnBài học dự án

9Flexbox

Flexbox là gì?Hướng flexCăn chỉnh nội dungCăn chỉnh các phần tửCăn giữa hoàn hảoThử thách Flexbox

12Kiến thức cơ bản về thiết kế đáp ứng

Thiết kế đáp ứng là gì?Thẻ meta viewportBố cục linh hoạtĐơn vị viewportKiến thức cơ bản về media queryHình ảnh linh hoạt

Tự luyện tập: Playground Web