Hướng dẫn
Quảng cáo

Làm sao để thay đổi kích thước hình ảnh bằng CSS?

Chủ đề: HTML / CSSBài trước|Bài tiếp

Thuộc tính hình ảnh thay đổi kích thước được sử dụng trong web đáp ứng trong đó hình ảnh được thay đổi kích thước tự động để phù hợp với thùng chứa div. Thuộc tính độ rộng tối đa trong CSS được sử dụng để tạo thay đổi kích thước thuộc tính hình ảnh. Thuộc tính thay đổi kích thước sẽ không hoạt động nếu chiều rộng và chiều cao của hình ảnh được xác định trong HTML.

Ví dụ

img {
       max-width: 100%;
       height: auto;
}

Chiều rộng cũng có thể được sử dụng thay vì chiều rộng tối đa nếu muốn. Điều quan trọng là sử dụng height: auto để ghi đè bất kỳ chiều cao = thuộc tính nào có thể có trên ảnh.
Các thuộc tính CSS chiều rộng tối đa và chiều cao tối đa hoạt động rất tốt, nhưng không hỗ trợ nhiều trình duyệt.

Ví dụ

<!DOCTYPE html>
<html> 
    <head> 
        <title>cell padding</title> 
        <style> 
            .gfg {
                width:auto;
                text-align:center;
                padding:20px;
            }
            img {
                max-width:100%;
                        height:auto;
            }
        </style> 
    </head> 
    <body> 
        <div class = "gfg">
            <p id="my-image"><img src=
"https://visiontravel.com/uploads/hagianglooptour.jpg">
            </p>
        </div>
    </body> 
</html>

Một cách sử dụng phổ biến là đặt chiều rộng tối đa: 100%; chiều cao: tự động; vì vậy hình ảnh lớn không vượt quá chiều rộng container của chúng. Một cách khác là sử dụng thuộc tính phù hợp với đối tượng, điều này sẽ phù hợp với hình ảnh, mà không thay đổi tỷ lệ.

Ví dụ

<!DOCTYPE html>
<html> 
    <head> 
        <title>cell padding</title> 
        <style> 
            .gfg {
                width:auto;
                text-align:center;
                padding:20px;
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        </style> 
    </head> 
    <body> 
        <div class = "gfg">
                <p id="my-image"><img src=
"https://visiontravel.com/uploads/hagianglooptour.jpg">
            </p>
        </div>
    </body> 
</html>  

Câu hỏi liên quan

Dưới đây là một số câu hỏi thường gặp khác liên quan đến chủ đề này:

Advertisements