Hình ảnh kích thước CSS

Thuộc tính thay đổi kích thước hình ảnh được sử dụng trong web phản hồi trong đó hình ảnh tự động thay đổi kích thước để phù hợp với bộ chứa div. Thuộc tính độ rộng tối đa trong CSS được sử dụng để tạo thuộc tính thay đổi kích thước 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.  

cú pháp

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 chiều cao. tự động ghi đè bất kỳ thuộc tính height=”…” nào đã có trên hình ảnh. Các thuộc tính CSS max-width và max-height hoạt động tốt nhưng không được nhiều trình duyệt hỗ trợ. ví dụ 1.  

html




<____3____4

    <head>

        <121>

        <7>

9<0

<1<2

<1<4

<1<6

9<8

9html0

<1html2

html3____34

9<8

        html87>

    html8head>

    <>7>

        <    1     2

9<    5     6    7     8

    9

9html8____55>

        html8    1____4

    html8>7>

html8html>

đầu ra.

Hình ảnh kích thước CSS

Một cách sử dụng phổ biến là đặt chiều rộng tối đa. 100%; . Tự độ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ụ 2.  

html




<____3____4

    <head>

        <121>

        <7>

9<0

<1<2

<1<4

<1<6

9<8

9html0

<106

<108

<1____110

9<8

        html87>

    html8head>

    <>7>

        <    1     2

<1<    5     6    7     8

    9

9html8____55>

        html8    1____4

    html8>7>

html8html50

đầu ra.

Hình ảnh kích thước CSS

CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này