Để 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
Và bạn xác định được phần tử cha bao ngoài của img
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.
