Mengapa flexbox meregangkan gambar saya daripada mempertahankan rasio aspek?

156

Flexbox memiliki perilaku ini saat membentang gambar hingga ketinggian alami. Dengan kata lain, jika saya memiliki wadah flexbox dengan gambar anak, dan saya mengubah ukuran lebar gambar itu, tingginya tidak mengubah ukuran sama sekali dan gambar menjadi melebar.

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}
<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>
Luaskan cuplikan

Apa yang menyebabkan ini?

Saya menambahkan CodePen ini untuk menunjukkan apa yang saya maksud.

html css flexbox sjbuysse
sumber
5
Di Firefox dan IE berfungsi dengan baik. Di Chrome Anda dapat memperbaiki dengan align-self:flex-start di gambar. Saya tidak tahu mengapa, mungkin nilai default di chrome adalah stretch.
2
Juga menambah tinggi: 100%; untuk img memperbaiki masalah, saya ingin tahu mengapa itu membentang gambar juga.
Paran0a
3
@blonfu, nilai default di semua browser adalah align-items: stretch/ align-self: stretch. Jika Anda menambahkan perbatasan di sekitar setiap item dan menghapus wrap, Anda akan melihat semua item membentang di semua browser: codepen.io/anon/pen/oLXBVx?editors=1100
Michael Benjamin
Oke. Saya mempelajari ini tetapi dengan gambar bekerja secara berbeda di chrome dan browser lainnya. Chrome tidak menghormati rasio aspek jika Anda tidak menentukan ketinggian.
@blonfu, Ya. Tidak diragukan lagi ada inkonsistensi peramban dan tingkat yang lebih terperinci.
Michael Benjamin

Jawaban:

365

Itu membentang karena align-selfnilai default stretch. Setel align-selfke center.

align-self: center;

Lihat dokumentasi di sini: luruskan sendiri

pradeep1991singh
sumber
Ya tapi browser lain mempertahankan rasio aspek dalam gambar. Chrome juga tidak menerapkan basis-fleksibel di img
9
Saya pikir align-self: start;mungkin jawaban yang lebih kuat karena gambar harus secara vertikal sejajar dengan TOP wadah mereka (bukan pusat) seperti gambar tanpa gaya (tidak ada css) akan. Either way, kedua jawaban memperbaiki peregangan. Jadi itu tergantung pada apa yang diinginkan OP tentu saja - hanya saja tidak mendapatkan kesan 'terpusat secara vertikal' dari pos OP.
kodok
Jika Anda tidak menentukan lebar pada gambar dan itu dalam wadah fleksibel, itu akan membentang hingga 100%. align-self: [flex-start, center...others]akan mencegah gambar mengambil 100% dari lebar wadah fleksibel. align-self:centermemperbaikinya tentu saja, tetapi jika Anda ingin gambar Anda mulai dari awal atau akhir penggunaan wadahalign-items: flex-start or flex-end
cacoder
1
Anda juga dapat menempatkan align-items: center(atau apa pun penyelarasan yang sesuai dengan kebutuhan Anda) pada induknya.
electrovir
16

Atribut kuncinya adalah align-self: center:

.container {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

img.align-self {
  align-self: center;
}
<div class="container">
    <p>Without align-self:</p>
    <img src="http://i.imgur.com/NFBYJ3hs.jpg" />
    <p>With align-self:</p>
    <img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>
Luaskan cuplikan

Dorian
sumber
1

Saya menghadapi masalah yang sama dengan menu Foundation. align-self: center;tidak bekerja untuk saya.

Solusi saya adalah membungkus gambar dengan a <div style="display: inline-table;">...</div>

isapir
sumber
2
Ini tentang flexbox.
Ini adalah solusi untuk flexbox. Gambar dan div ada di dalam wadah flexbox.
isapir
0

Menambahkan marginuntuk menyelaraskan gambar:

Karena kita ingin imagemenjadi left-aligned, kami menambahkan:

img {
  margin-right: auto;
}

Demikian pula untuk imagemenjadi right-aligned, kita bisa menambahkan margin-right: auto;. Cuplikan memperlihatkan demo untuk kedua jenis perataan.

Semoga berhasil...

div {
  display:flex; 
  flex-direction:column;
  border: 2px black solid;
}

h1 {
  text-align: center;
}
hr {
  border: 1px black solid;
  width: 100%
}
img.one {
  margin-right: auto;
}

img.two {
  margin-left: auto;
}
<div>
  <h1>Flex Box</h1>
  
  <hr />
  
  <img src="https://via.placeholder.com/80x80" class="one" 
  />
  
  
  <img src="https://via.placeholder.com/80x80" class="two" 
  />
  
  <hr />
</div>
Luaskan cuplikan

Akash
sumber
0

Peregangan karena nilai default align-self adalah peregangan. ada dua solusi untuk kasus ini: 1. atur img align-self: center ATAU 2. atur parent align-items: center

img {

   menyelaraskan diri: pusat
}

ATAU 

.parent {
  menyelaraskan item: pusat
}
mohamed ali
sumber