Sitemdeki resimleri nasıl aynı hizaya getireceğim?

Merhaba,

Bootstrap ile d-flex ve img-fluid komutlarını kullanarak, kutu ve görsel boyunlarını hizayabilirsiniz. Bootstrap, responsive bir framework olduğu için, sabit bir yükseklik kullanımı pek tavsiye edilmez. d-flex ile responsive olacak şekilde, doğrudan uzunluk ve boyutlarını ayarlayabilirsiniz.

Aşağıda ki linklere bakmanızı öneririm.


Dipnot: img-fluid sadece geniş olarak görsel sunmaz, dikey görsellerde de responsive olarak çalışmaktadır.

iamsezer dedi:

Merhaba,

Bootstrap ile d-flex ve img-fluid komutlarını kullanarak, kutu ve görsel boyunlarını hizayabilirsiniz. Bootstrap, responsive bir framework olduğu için, sabit bir yükseklik kullanımı pek tavsiye edilmez. d-flex ile responsive olacak şekilde, doğrudan uzunluk ve boyutlarını ayarlayabilirsiniz.

Aşağıda ki linklere bakmanızı öneririm.

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

getbootstrap.com

Images

Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.

getbootstrap.com

Dipnot: img-fluid sadece geniş olarak görsel sunmaz, dikey görsellerde de responsive olarak çalışmaktadır.

Genişletmek için tıkla...

Bu yöntemler maalesef resmin oranıyla oynadığı için yamuk yumuk şeyler ortaya çıkıyor.

Ama profesyonel projelerde sabit çözünürlükler kullanıldığı düşünülürse bu yöntem kullanılmalı.

Berkay Davas dedi:

Bu yöntemler maalesef resmin oranıyla oynadığı için yamuk yumuk şeyler ortaya çıkıyor.

Ama profesyonel projelerde sabit çözünürlükler kullanıldığı düşünülürse bu yöntem kullanılmalı.

Genişletmek için tıkla...

Resimler x bir orantıda olduğu zaman, "yamuk yumuk" olacağını düşünüyorum. Film posterleri x:x ratio olarak yayınlandığı için (genelde 2:3 olarak), bu posterlerin img-fluid ve d-flex ile tam orantılı olacağını düşünüyorum. d-flex kullanması, aynı zamanda satırları hizalayacak, en uzun sütuna göre, diğer sütunların yüksekliğini de ayarlayacaktır. (resim harici)

Sabit resim boyutu kullanıldığı zaman, responsive sorunları yaratabiliyor. Bazen de media query gerektirebiliyor, her bir çözünürlük için.

En azından benim deneyimlerim ve çalıştığım şekil, bu şekil. Daha az kod, daha hafif tasarımlar.