Cách chỉnh kích thước ảnh trong HTML và CSS

Để trình duyệt hiểu và hiển thị hình ảnh thì cần phải dùng tới thẻ <img/>, đây là thẻ đơn và nó đóng ở cuối cùng của thẻ luôn. Một điều khiến cho những người mới cảm thấy lúng túng đó là không biết cách chỉnh kích thước ảnh trong HTML, CSS như thế nào.

Để giải quyết vấn đề này xin mời các bạn tham khảo bài viết trong chuỗi Series học HTML của mình nhé!

Cách hiển thị ảnh:

<img alt="Thẻ ALT" src="duong-dan-anh.jpg" />

Như ở trên bạn sẽ thấy các bức ảnh khi viết dưới dạng mã HTML sẽ bắt đầu bằng <img

Tiếp theo đó là thẻ alt nó quan trọng giúp khai báo cho công cụ tìm kiếm Google biết được nội dung của bức ảnh đó.

Và cuối cùng là src đường dẫn của ảnh.

Vậy làm sao để thay đổi kích thước bức ảnh đó?

Có 2 cách như bên dưới

Cách 1: Thêm class vào image

<img alt="Thẻ ALT" src="duong-dan-anh.jpg" class="imageChange"/>

Tiếp đó bạn sẽ viết mã CSS như sau:

.imageChange {
max-width: 400px;
height: auto;
}

Cách 2: Xác định phần tử cha

Ví dụ:

<div class="parent-element">
<img alt="Thẻ ALT" src="duong-dan-anh.jpg" class="imageChange"/>
</div>

Trên trình duyệt Chrome bạn sẽ dùng chuột phải

thay-doi-kich-thuoc-anh

Và bạn xác định được phần tử cha bao ngoài của img

thay-doi-kich-thuoc-anh-2

Viết CSS như sau:

.news-block-thumb img {
max-width: 500px;
height: auto;
}

Với hướng dẫn chỉnh lại kích thước chiều cao và chiều rộng của ảnh trên đây. Hi vọng sẽ mang lại những kiến thức hữu ích cho những người mới tiếp xúc với HTML và CSS lần đầu tiên.

Related Posts

Cách sử dụng đường dẫn tương đối trong HTML

Cách sử dụng đường dẫn tương đối trong HTML

Trang web hiện đại thường bao gồm nhiều tài nguyên như hình ảnh, trang HTML khác, tệp tin CSS và JavaScript. Để liên kết và truy cập…

Hover-CSS-1

Hiệu ứng rê chuột trong CSS

CSS là ngôn ngữ trang trí với nhiều hiệu ứng hay. Bạn sẽ thường gặp nhất là khi di chuyển chuột vào một liên kết (Link) hay…

javascript

Cách gọi hàm JavaScript trong HTML

Hàm (Functions) trong JavaScript nếu không gọi đến nó sẽ không thực thi chức năng. Vì thế để thực hiện một nhiệm vụ nào đó ở trong…

Mẫu Form đăng nhập HTML và CSS đẹp mắt

Trong một số bài viết trên blog này mình đã chia sẻ về cách tạo một Form đăng nhập đơn giản. Nhưng để có một Form đẹp…

form-lien-he-4

Hướng dẫn tạo form liên hệ bằng HTML, CSS

Form liên hệ là một chức năng không thể thiếu cho blog, website. Thông qua Form độc giả, khách hàng có thể yêu cầu admin trợ giúp…

hoc-html1

Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML

Một trong các thẻ thường được sử dụng khi xây dựng website bằng HTML đó là thẻ a. Nó có vai trò quan trọng đối với người…