Để 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.

Category:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *