Dlaczego flexbox rozciąga mój obraz zamiast zachowywać proporcje?

156

Flexbox zachowuje się tak, że rozciąga obrazy do ich naturalnej wysokości. Innymi słowy, jeśli mam kontener typu flexbox z obrazem podrzędnym i zmieniam szerokość tego obrazu, wysokość w ogóle się nie zmienia, a obraz zostaje rozciągnięty.

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>

Rozwiń fragment

Co to powoduje?

Dodałem ten CodePen, aby zademonstrować, co mam na myśli.

html css flexbox

— sjbuysse
źródło

5

W Firefox i IE działa dobrze. W przeglądarce Chrome można naprawić za align-self:flex-start pomocą obrazu. Nie wiem dlaczego, może domyślną wartością w chrome jest stretch.

2

Dodaje również wysokość: 100%; aby img rozwiązał problem, chciałbym wiedzieć, dlaczego również rozciąga obraz.

— Paran0a

3

@blonfu, domyślną wartością we wszystkich przeglądarkach jest align-items: stretch/ align-self: stretch. Jeśli dodasz obramowanie wokół każdego elementu i usuniesz go wrap, zauważysz, że wszystkie elementy rozciągają się we wszystkich przeglądarkach: codepen.io/anon/pen/oLXBVx?editors=1100

— Michael Benjamin

Ok, uczę się tego, ale z obrazami działa inaczej w przeglądarce Chrome i innych. Chrome nie przestrzega proporcji, jeśli nie zdefiniujesz wysokości.

@blonfu, Yes. Bez wątpienia są niespójności w przeglądarkach i bardziej szczegółowe poziomy.

— Michael Benjamin

365

Rozciąga się, ponieważ align-selfwartość domyślna to stretch. Ustaw align-selfna center.

align-self: center;

Zobacz dokumentację tutaj: align-self

— pradeep1991singh
źródło

Tak, ale inne przeglądarki zachowują proporcje obrazów. Chrome ani nie stosuje flex-

9

Myślę, że align-self: start;może to być silniejsza odpowiedź, ponieważ obrazy powinny być wyrównane pionowo do góry ich kontenerów (nie do środka), jak każdy obraz bez stylów (bez CSS). Tak czy inaczej, obie odpowiedzi naprawiają rozciąganie. Zależy to oczywiście od tego, czego chce OP - po prostu nie uzyskałem tego „wyśrodkowanego w pionie” wrażenia z postu OP.

— ropucha

Jeśli nie zdefiniujesz szerokości obrazu i znajduje się on w pojemniku elastycznym, rozciągnie się do 100%. align-self: [flex-start, center...others]zapobiegnie zajęciu przez obraz 100% szerokości kontenerów elastycznych. align-self:centernaprawia to oczywiście, ale jeśli chcesz, aby twój obraz zaczynał się od początku lub końca użycia konteneraalign-items: flex-start or flex-end

— cacoder

1

Możesz również umieścić align-items: center(lub dowolne dopasowanie, które odpowiada Twoim potrzebom) na rodzica.

— electrovir

16

Kluczowym atrybutem jest 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>

Rozwiń fragment

— dorycki
źródło

1

Napotkałem ten sam problem z menu podstawowym. align-self: center;nie działa dla mnie.

Moim rozwiązaniem było owinięcie obrazu plikiem <div style="display: inline-table;">...</div>

— isapir
źródło

2

Chodzi jednak o flexbox.

To jest rozwiązanie dla flexbox. Obraz i element div znajdują się w kontenerze flexbox.

— isapir

0

Dodawanie w `margin`celu wyrównania obrazów:

Ponieważ chcieliśmy, imageaby taki był left-aligned, dodaliśmy:

img {
  margin-right: auto;
}

Podobnie imageby być right-aligned, możemy dodać margin-right: auto;. Fragment pokazuje demo dla obu typów wyrównania.

Powodzenia...

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>

Rozwiń fragment

— Akash
źródło

0

Jest to rozciąganie, ponieważ domyślną wartością align-self jest stretch. istnieją dwa rozwiązania dla tego przypadku: 1. set img align-self: center LUB 2. set parent align-items: center

img {

   align-self: center
}

LUB

.rodzic {
  align-items: center
}

— Mohamed ali
źródło

Dlaczego flexbox rozciąga mój obraz zamiast zachowywać proporcje?

Dodawanie w margincelu wyrównania obrazów:

Dodawanie w `margin`celu wyrównania obrazów: