Adatta immagine a un bambino flessibile con dimensioni automatiche

Question

Ho un problema molto particolare che ho cercato di risolvere negli ultimi 2 giorni senza successo. La pagina che sto edificio ha la seguente struttura:

posso facilmente ottenere il layout AB con il genitore complessiva avendo display: flex; flex-direction: column; align-items: stretch e fissa un essere flex: 0 0 auto e B per essere flex: 1 1 0; min-height: 100px;

Comunque io Sto avendo problemi con il layout di C e D all'interno di B. Mi sembra che il flex/row sia l'approccio giusto per B, ma non riesco proprio ad ottenere le specifiche. Quindi sto cercando:

.B { 
    display: flex; 
    flex-direction: row; 
    align-items: stretch; 
    justify-content: space-between; 
} 

.C { 
    flex: 1 1 0; 
} 

.D { 
    object-fit: scale-down; 
} 

Ma chiaramente questo non è sufficiente. L'immagine non si ridimensiona affatto, si riduce ma distorce o lascia molto spazio se si imposta anche flex: 1 1 0 con larghezza minima.

Qualche idea su come posso ottenere ciò di cui ho bisogno qui?

UPDATE: Ho provato a mettere insieme jsfiddle qui - https://jsfiddle.net/2gsrzwwq/3/ - ma per qualche motivo non sarebbe nemmeno onorare height:100% sul genitore. Per quanto riguarda l'adattamento dell'immagine, ho bisogno che l'immagine riduca fino all'altezza del div D e poi riduca il blocco D in larghezza per contenere solo l'immagine ridotta, e per il blocco C occupi la larghezza rimanente.

Answer 1

Dopo molta più fatica e un'altra notte insonne, mi è venuto in mente qualcosa di funzionante. Il sacrificio che dovevo fare non è quello di regolare la larghezza del contenitore dell'immagine e sistemarlo sempre a metà larghezza dello schermo (nota che nell'app reale non ci sono colori di sfondo, quindi non sembrerà strano, piuttosto ci sarà dello spazio bianco extra). Dovrò discuterne con il cliente, ma penso che riuscirò a convincerli. Ecco quello che mi si avvicinò con:

https://jsfiddle.net/2gsrzwwq/6/

HTML:

<div class="page"> 
    <div class="A"> 
    </div> 

    <div class="B"> 
    <div class="C"> 
    </div> 
    <div class="D"> 
     <img src="http://res.freestockphotos.biz/pictures/10/10677-illustration-of-a-red-lobster-pv.png"/> 
    </div> 
    </div> 
</div> 

CSS:

div { 
    box-sizing: border-box; 
} 

.page { 
    width: 100%; 
    height: 250px; 
    border: solid 1px black; 
    margin: 5px; 
    background-color: lightYellow; 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    justify-content: flex-start; 
} 

.A { 
    background-color: lightPink; 
    margin: 5px; 
    flex: 0 0 50px; 
} 

.B { 
    background-color: lightBlue; 
    margin: 5px; 
    flex: 1 1 0; 
    min-height: 80px; 
    display: flex; 
    flex-direction: row; 
    align-items: stretch; 
    justify-content: space-between 
} 

.C { 
    background-color: lightGreen; 
    margin: 5px; 
    flex: 1 1 0; 
    min-width: 100px; 
} 

.D { 
    background-color: lightGrey; 
    margin: 5px; 
    flex: 1 1 0; 
    min-height: 50px; 
    display: flex; 
    justify-content: flex-end; 
} 

.D img { 
    flex: 1 1 0; 
    max-height: 100%; 
    max-width: 200px; 
    object-fit: scale-down; 
    object-position: top right; 
} 

Answer 2

ero alle prese con lo stesso problema io stesso:

Maximum possible size image and div expanding to fill the space

Mi è venuta la seguente soluzione, che ho anche fornito come risposta alla mia domanda. Vedi https://jsfiddle.net/wwhyte/vjLps7qs/; sostituire l'immagine con http://placekitten.com/1600/900 per visualizzare il comportamento del paesaggio.

CSS:

.container { 
    width: calc(100vw); 
    height: 100vh; 
    overflow: hidden; 
    } 

    .top { 
    height: 1.25em; 
    background: yellow; 
    } 

    .innerCtr { 
    height: 100%; 
    overflow: hidden; 
    } 

    .left { 
    height: 100%; 
    background: red; 
    overflow: hidden; 
    } 

    .right { 
    max-height: 100%; 
    max-width: 80%; 
    background: blue; 
    float: right; 
    object-fit: contain; 
    overflow: hidden; 
    position: relative; 
    top: 50%; 
    transform: translateY(-52%) scale(0.95); 
    } 

HTML:

<div class="container"> 
    <div class="top"> 
    </div> 
    <div class="innerCtr"> 
    <img class="right" src="http://placekitten.com/1600/900"> 
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div> 
    </div> 
</div> 

Quello che penso sta accadendo è:

• Nella classe di destra:
  • max-height, max-width e object-fit mi danno il ridimensionamento di cui ho bisogno.
  • float: right fornisce la posizione di cui ho bisogno. (L'ho ottenuto da un articolo che ho trovato ieri ma che ora ho perso, modificherò questa risposta per fornire l'attribuzione se la ritroverò).
  • la trasformazione è ispirata all'articolo sull'allineamento verticale a: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/.
  • la scala del 95% migliora la visibilità dell'immagine.
• Nella classe sinistra, altezza: 100% dà la dimensione del pannello voglio
• La classe innerCtr dà un genitore per l'immagine da calcolare la sua altezza contro
• La classe contenitore si inserisce la finestra al browser finestra.

Anche questo non è proprio l'ideale. C'è una strana interazione tra l'altezza della barra in alto e l'altezza dell'immagine in modo che la parte inferiore dell'immagine venga spinta fuori dal display. L'importo espulso è inferiore a ma correlato all'altezza della barra in alto: non ho studiato a fondo. Se rimuovi la barra superiore, il CSS sopra si comporta perfettamente. Ho affrontato questo problema con la scala del 95% e la leggera regolazione della trasformata Y, ma questo non si comporta esattamente esattamente a dimensioni di finestra piccole - l'immagine non è perfettamente centrata verticalmente. Avevo pensato che l'impostazione height = calc (100vh-1.25em) sulla classe contenitore potesse risolvere il problema, ma in realtà rompe il ridimensionamento verticale dell'immagine in modo che ora riduca solo in orizzontale. Questo era completamente comportamento inaspettato! Ma a parte questo, questo soddisfa i miei bisogni.