Fix hình ảnh đều nhau

29/05/2019

Bài sau » « Bài trước

Khi làm các dự án chúng ta hay gặp trường hợp show list sản phẩm, list bài viết. Tuy nhiên, vì lý do nào đó mà admin của website không xử lý hình trước khi up lên. Kết quả là các sản phẩm, bài viết không đều nhau.

Ở bài viết này Master Frontend sẽ đề cập 1 số hướng giải quyết cho hình ảnh đều nhau mà không quá quan trọng việc admin của website up hình kích thước như thế nào.

Fix hinh anh deu nhau

Cách 1: Dùng max-width và max-height cho <img>

Đây là cách thông thường, các bước làm như sau:

- Bước 1: Cho box bao thẻ img có chiều cao cố định - ví dụ khoảng height: 250pxtext-align: center để hình ảnh nằm giữa.

- Bước 2: Cho hình ảnh ở trong thuộc tính css max-width: 100%;max-height: 100%;

<div class="product-img"> <a href="#" > <img src="image_url.jpg" alt="mo ta hinh anh" ></div> </a> </div>

.product-img { text-align: center; height: 250px; } .product-img img { max-width: 100%; max-height: 100%; }

Kết quả hiển thị như hình sau:

fix hình ảnh đều nhau

Cách này thì hình ảnh theo hình vuông, chữ nhật đứng thì oke. Nếu hình chữ nhật ngang thì tạo khoảng trống lớn phía dưới tạo cảm giác nhìn không cân đối.

Cách 2: Dùng background

- Bước 1: Ta tạo cấu trúc HTML như sau:

<div class="product-img"> <a href="#" > <div class="img-box" style="background: url('image_url.jpg') center center/contain no-repeat;" ></div> </a> </div>

Ở đoạn code trên ta có cú pháp: style="background: url('image_url.jpg') center center/contain no-repeat;"

Có nghĩa là:

+ background-image: url('image_url.jpg'); - Hình ảnh nền

+ background-position: center center; - Cho vị trí background nằm giữa

+ background-size: contain; - Co giãn hình nền với kích thước đầy đủ

+ background-repeat: no-repeat; - Không lặp lại hình nền

- Bước 2: Ta cho class .img-box chiều cao cụ thể (height: 250px) là được. Hình ảnh tự động co theo khung hình và nằm ở giữa.

.product-img .img-box{ height: 250px; }

Kết quả hiển thị :

fix hinh anh deu nhau

Cách này thì hình ảnh theo chiều ngang hay đứng đều nằm ở giữa. Xem link demo ở đây.

Cách 3: Dùng object-fit

- Cách này phát triển từ cách 1 ở trên. Nhưng do thuộc tính object-fit này mới, chỉ những phiên bản sau này của trình duyệt mới hỗ trợ, nên cân nhắc khi sử dụng.

fix hinh anh deu nhau

Code CSS sửa lại như sau:

.product-img { text-align: center; height: 250px; } .product-img img { width: 100%; height: 100%; object-fit: contain; }

Như vậy, Master FrontEnd đã tổng hợp 3 phương án hay dùng trong việc fix hình ảnh đều nhau giữa các list sản phẩm, bài viết. Nếu bạn có phương pháp nào hay hơn hãy để lại bình luận cho mọi người cùng tham khảo nhé ^____^!

Bài sau » « Bài trước

Bình luận

1win_Kazan_Zenry 15/05/2021

Доброго дня! Мы рады приветствовать вас на страницах нашего информационного ресурса об азартных играх!

Наданный момент в результате высокой конкуренции среди интернет казино вынуждены предоставлять информационным партнерам хорошие условия сотрудничества, для получения больше новых игроков в своих казино.
При этом каждое казино старается дать что-то неповторимое в своих условиях сотрудничества.
Так например, быстрый процесс вывода денежных средств.
Для новичка этот процесс является весьма важным. Из-за этого успешные игроки выбирают казино с мгновенными выводами.
Также, важным фактором являяется наличие у интернет казино общирного выбора игровых автоматов.
Наличие такого ассортимента может говорить о том, что выбранная интернет площадка не является мошейническим сайтом.

в случае примите решение самолично проводить поиск казино, то обязательно смотрите на репутацию выбранного информационного портала.
Одним из проверенных игровых сервисов является: 1win
Давайте рассмотрим подробнее данную площадку.
Главным приемуществом является наличие встроенного функционала букмекерской конторы.
огромный спектр бонусов, таких как бонусы от размера депозита, дает возможность выиграть солидный выигрышь!
Приличная комбинация вышеописанных функциональных возможностей позволяет геймерам без больших вложений, и начать зарабатывать уже сегодня.
Для старта вам необходимо определить игровую тактику. На сайте 1win вы найдете оптимальную тактику на любой вкус!
Также, на сайте представлен раздел блога, где опытные игроки делятся мыслями, помогая новичкам совершать свои первые победы.
К примеру, мы не советуем сразу играть на высоких ставках, так как это предполагает большие риски проигрыша.

Дополнительно, стоит обращать внимание на наличие качественной технической поддержки пользователей в на игровой площадке.
1win всегда заботится об гемблерах и оказывает помощь в течении 10-15 минут.

Приходи на игровой сайт и зарабатывай уже сейчас!
Back to top