Szerokość faksu przeglądarki Firefox

Mam problem z uzyskaniem obrazu, który zajmie nie więcej niż 100% dostępnej szerokości kontenera nadrzędnego. Zauważam tylko problem w przeglądarce Firefox 36 (nie IE ani Chrome). Czy to jest błąd w Firefoksie, czy też coś tu brakuje?Szerokość faksu przeglądarki Firefox

Uwaga: Obraz nigdy nie powinien być większy niż jego oryginalny rozmiar.

Chrome:

enter image description here

Firefox:

enter image description here

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style type="text/css"> 
 
.container { 
 
    width:300px; 
 
} 
 
.flexbox { 
 
    display:flex; 
 
} 
 

 
.flexbox .column { 
 
    flex:1; 
 
    background-color: red; 
 
} 
 

 
.flexbox .middleColumn { 
 
    flex:3; 
 
} 
 

 
.flexbox .middleColumn img { 
 
    width:auto; 
 
    height:auto; 
 
    max-width:100%; 
 
    max-height:100%; 
 
    align-self: center; 
 
    display: block; 
 
} 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="flexbox"> 
 
     <div class="column">This is the left column!</div> 
 
     <div class="middleColumn"> 
 
      <img src="http://placehold.it/400/333333"> 
 
     </div> 
 
     <div class="column">This is the right column!</div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Źródło

2015-02-25 Drew Freyling

Musisz dodać min-width:0 na .middleColumn, jeśli chcesz pozwolić, aby zmniejszyło się poniżej jego minimalnej szerokości (wewnętrzna szerokość jego <img> -child).

W przeciwnym razie otrzyma nową wartość domyślną min-width:auto, która na elemencie elastycznym spowoduje, że nie będzie się zmniejszać poniżej rozmiarów zawiniętego w folię.

(Chrome hasn't implementedmin-width:auto. Powiedziano mi, że IE ma w swoim silniku renderującym następną gen, więc spodziewałbym się, że ta wersja powinna zachowywać się jak Firefox tutaj - podobnie jak Chrome, gdy tylko zaimplementują tę funkcję.)

Fragment z ustaloną:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style type="text/css"> 
 
.container { 
 
    width:300px; 
 
} 
 
.flexbox { 
 
    display:flex; 
 
} 
 

 
.flexbox .column { 
 
    flex:1; 
 
    background-color: red; 
 
} 
 

 
.flexbox .middleColumn { 
 
    flex:3; 
 
    min-width:0; 
 
} 
 

 
.flexbox .middleColumn img { 
 
    width:auto; 
 
    height:auto; 
 
    max-width:100%; 
 
    max-height:100%; 
 
    align-self: center; 
 
    display: block; 
 
} 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="flexbox"> 
 
     <div class="column">This is the left column!</div> 
 
     <div class="middleColumn"> 
 
      <img src="http://placehold.it/400/333333"> 
 
     </div> 
 
     <div class="column">This is the right column!</div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Źródło

2015-02-26 23:14:10 dholbert

Dziękujemy! 'min-width: 0;' rozwiązał mój problem. Firefox zastosował 'min-width: -moz-min-content', a Chrome zastosował' min-width: auto'. –

muszę przyznać, że nie jestem pewien dlaczego, ale z jakiegoś powodu w przeglądarce Firefox wygląda na to, że trzeba nadać obrazowi szerokość/wysokość (tj. coś innego niż "auto"). Nasz stary przyjaciel 100% wydaje rade:

.flexbox .middleColumn img { 
    width: 100%; 
    height: 100%; 
    display: block; 
}

Here's a fiddle showing the working solution. Zauważ, że zmieniłem kolumny boczne na flex:2, aby wynik był bardziej widoczny.

Źródło

2015-02-25 22:08:06 gerrod

Dzięki, ale ja już wiedziałem, że to, będę aktualizować pytanie być bardziej szczegółowe, że jeśli obraz nie powinien być większy niż jest to oryginalne wymiary. –

Mój problem nie jest dokładnie taki sam, ale to zachęciło mnie do wypróbowania 'width' na obrazie zamiast' min-width', co naprawiło mój problem. – DawnPaladin

Nie będzie działać, gdy obraz nie jest tak szeroki, jak jego kontener, gdy ten kontener jest elementem flex. Obraz rozciągnie się na całą szerokość pojemnika. – Chris

wydaje mi się, aby to praca z następujących czynności:

.flexbox { 
    display:flex; 
} 
.flexbox .column { 
    flex:1 1 0; 
    overflow:hidden; 
    background-color: red; 
} 

.flexbox .middleColumn { 
    flex-grow:3; 
    flex-shrink:3; 
} 

.flexbox .middleColumn img { 
    max-width:100%; 
}

ustawienie flex:1 1 0; dla wszystkich kolumn ustawia je na równomierny rozrost i robi to z równych i małych rozmiarów 0px.

Następnie overide się rosnąć i kurczyć na .middleColumn

max-width:100%; potrzebna jest jak zwykle

magii wydaje się być overflow:hidden; na rzecz coraz zgięte.

inne rzeczy na obrazie nie są potrzebne.

Źródło

2016-01-15 08:26:05 Arron

Z mojego doświadczenia wynika, że podejście jest nieco inne, może dziwne, ale działa.Zasadniczo ustalam maksymalną szerokość do rzeczywistej szerokości obrazu, więc nie będzie ona pikselować i używać szerokości procentowej zamiast maksymalnej szerokości. Jeśli masz, powiedzmy <ul> (Flex) pojemnik, komórki będą:

li{ 
    flex-grow: 0; 
    flex-shrink: 1; 
    flex-basis: auto; 
    width: 50%; // for example.. 

    img{ 
    display: block; 
    max-width: [your real img width in px] // instead of 100%; 
    width:100%; // instead of max-width 
    } 
}

Źródło

2016-03-17 13:31:44 Stratboy

Szerokość faksu przeglądarki Firefox

Odpowiedz

Powiązane problemy