Flexbox neden en boy oranını korumak yerine resmimi uzatıyor?

156

Flexbox, görüntüleri doğal yüksekliklerine uzattığı bu davranışa sahiptir. Başka bir deyişle, bir alt resme sahip bir flexbox kabım varsa ve bu görüntünün genişliğini yeniden boyutlandırırsam, yükseklik hiç yeniden boyutlandırılmaz ve görüntü uzatılır.

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>

Snippet'i genişlet

Buna ne sebep olur?

Ne demek istediğimi göstermek için Bu CodePen'i ekledim .

html css flexbox

— sjbuysse
kaynak

5

Firefox ve IE'de iyi çalışıyor. Chrome'da align-self:flex-start görüntüde düzeltebilirsiniz . Neden bilmiyorum, belki de krom varsayılan değer streç.

2

Ayrıca yükseklik ekleme:% 100; img sorunu giderir, neden görüntüyü de uzattığını bilmek istiyorum.

— Paran0a

3

@blonfu, tüm tarayıcılarda varsayılan değer align-items: stretch/ şeklindedir align-self: stretch. Her öğenin etrafına bir kenarlık ekler ve kaldırırsanız wrap, tüm öğelerin tüm tarayıcılarda uzandığını görürsünüz

— Michael Benjamin

Bunu öğreniyorum, ancak resimlerle krom ve diğer tarayıcılarda farklı çalışıyor. Yüksekliği tanımlamazsanız Chrome en / boy oranına uymaz.

@blonfu, Evet. Hiç şüphesiz tarayıcı tutarsızlıkları ve daha ayrıntılı düzeyler vardır.

— Michael Benjamin

365

align-selfVarsayılan değer olduğu için esniyor stretch. Set align-selfiçin center.

align-self: center;

Buradaki belgelere bakın: align-self

— pradeep1991singh
kaynak

Evet, ancak diğerleri tarayıcıda görüntülerdeki en boy oranını koruyor. Chrome,

9

Bence align-self: start;daha güçlü bir cevap olabilir çünkü görüntüler dikey olarak herhangi bir stilsiz görüntünün (css) yapacağı gibi kaplarının (orta değil) ÜST'üne dikey olarak hizalanmalıdır. Her iki şekilde de, her iki cevap da gerginliği düzeltir. Bu yüzden OP'nin elbette ne istediğine bağlı - OP'nin görevinden bu 'dikey merkezli' izlenimi alamadım.

— kurbağa

Bir görüntüde genişlik tanımlamazsanız ve bu bir esnek kapta ise,% 100'e kadar uzanır. align-self: [flex-start, center...others]görüntünün esnek kapların genişliğinin% 100'ünü almasını önleyecektir. align-self:centerelbette düzeltir, ancak görüntünüzün konteyner kullanımının başından veya sonundan başlamasını istiyorsanızalign-items: flex-start or flex-end

— cacoder

1

Ayrıca align-items: centerebeveyne koyabilirsiniz (veya ihtiyaçlarınıza uygun hizalama).

— electrovir

16

Anahtar özellik 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>

Snippet'i genişlet

— Dorian
kaynak

1

Aynı meseleyle bir Vakıf menüsü ile de karşılaştım. align-self: center;benim için çalışmadı.

Benim çözümüm görüntüyü bir <div style="display: inline-table;">...</div>

— isapir
kaynak

2

Gerçi flexbox ile ilgili.

Bu ise flexbox'a için çözüm. Görüntü ve div bir flexbox kabının içindedir.

— isapir

0

`margin`Resimleri hizalamak için ekleme :

İstediğimiz yana imageolmak left-aligned, biz ekledi:

img {
  margin-right: auto;
}

Benzer için imageolmak right-aligned, biz ekleyebilirmargin-right: auto; . Snippet, her iki hizalama türü için bir demo gösterir.

İyi şanslar...

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>

Snippet'i genişlet

— Akash
kaynak

0

Esneme-kendinden varsayılan değer gerilme olduğu için gerilir. bu durum için iki çözüm vardır: 1. img align-self: center VEYA 2. set üst hizalama öğeleri: center

img {

   kendini hizala: merkez
}

VEYA

.parent {
  hizalama öğeleri: merkez
}

— Muhammed Ali
kaynak

Flexbox neden en boy oranını korumak yerine resmimi uzatıyor?

marginResimleri hizalamak için ekleme :

`margin`Resimleri hizalamak için ekleme :