altezza in base al contenuto

[jimbo0]

Sto scrivendo un layout per una visualizzazione mobile. La struttura è molto semplice: div contenitore a schermo pieno che contiene due div in verticale: il primo con un'immagine, il secondo con testo e due pulsanti.
Il problema è che testando a risoluzione bassa (riducendo la larghezza del browser) testo e pulsanti vanno fuori schermo.
Basandoci sui mockup in allegato, il primo mostra il layout corretto, il secondo il problema attuale, il terzo come dovrei risolvere, ossia, in caso testo e pulsanti non abbiamo abbastanza spazio nello schermo, rimpicciolire l'immagine e dare più spazio a testo e pulsanti.

Sembra banale ma ho fatto qualche prova (anche con flex) e non ho trovato una soluzione soddisfacente.

screen.jpg

[carlomarangoni]

Posta il codice completo della pagina

[jimbo0]

è molto difficile isolare tutto css applicato a quella parte della pagina (è un'applicazione ionic con un template abbastanza complesso).

Questo però è l'html in questione

 <div class="flexcon slide-up">
            <div>
              <img  src="img/app-logo.png"/>
            </div>
            <div>
              <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel turpis quis metus blandit commodo. Morbi quam turpis, ultrices vitae elit ac, tincidunt scelerisque nulla. </h4>
            <h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel turpis quis metus blandit commodo. Morbi quam turpis, ultrices vitae elit ac, tincidunt scelerisque nulla. 
            </h4>
              <a class="button button-positive" ui-sref="app.about">Button 1</a>
              <a class="button button-positive" ui-sref="app.search">Button 2</a>
            </div>
          </div>

[Vincent.Zeno]

per come hai esposto le cose non capisco cosa c'entri l'altezza in base al contenuto, piuttosto parlerei di dimensione

l'html riportato è parziale e, senza poter vedere il css interessato, è difficile intervenire

dall'allegato si capisce che vuoi ridimensionare l'immagine contenuta nel box. credo sia il caso di inserire un breakpoint per stabilire il ridimensionamento, es:

@media (min-width: 480px) {
 .appLogo {
  width: 50px;
 }
}
 
@media (min-width: 768px) {
 .appLogo {
  width: 100px;
 }
}

<img class="appLogo" src="img/app-logo.png"/>

o, in alternativa, puoi tentare di dare misure in percentuale (100%) al logo

[jimbo0]

per come hai esposto le cose non capisco cosa c'entri l'altezza in base al contenuto, piuttosto parlerei di dimensione

hai ragione, per "altezza in base al contenuto" pensavo al secondo div che deve avere un'altezza definita (per visualizzare tutto il testo ed i pulsanti correttamente) ed il primo div (con il logo) deve prendersi il resto in altezza.
Il css non l'ho postato perché fondamentalmente posso riscriverlo da capo per questa parte della pagina (puoi assumere overflow:hidden per div.flexcon), mentre il resto dell'html non serve postarlo è scorrelato da questo problema e porterebbe solo confusione.
Vorrei evitare breakpoint perché dovrei gestire molti casi (per essere sicuro della corretta visualizzazione su smartphone e tablet) per questo pensavo a flex, farò qualche altra prova..

[jimbo0]

per chiarire meglio le idee, il codice completo è questo (le proprietà height:100vh,overflow:hidden di .section simulano il layout reale, quindi sono le uniche che non possono essere toccate):

<style>
*{margin:0}
section {
  display: flex;
  flex-flow: column;
  height: 100vh;
  overflow:hidden
}
div {
  flex: 1 ;
}
div.content {
  background: lightgreen;
}
</style>
<section>
  <div class="logo">
    <img src="http://via.placeholder.com/500x500">
     
  </div>
  <div class="content">
    questo contenuto deve essere sempre visibile, in caso non ci fosse spazio ad essere ridimensionato DEVE essere il div.logo
    <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
  </div>
</section>

[KillerWorm]

Non so se tu abbia già risolto, ad ogni modo riporto qui una possibile soluzione.

Considerando ciò che stavi cercando di fare, per quel che ne so, in linea di massima mi pare non si possa facilmente stabilire una dimensione per quel contenuto <img> (o per qualsiasi altro elemento) in base allo spazio occupato da un altro elemento. A meno che non si usi un po' di JavaScript per calcolare lo spazio restante e quindi applicare opportunamente la dimensione all'elemento img.

Quello che invece ti consiglio di fare è impostare l'immagine come background dell'elemento .logo e applicargli il valore contain per la proprietà background-size. Questo mostrerà l'immagine in modo che sia sempre contenuta nello spazio disponibile. Mentre per il div.content basterà usare flex-shrink:0.

Qui un esempio della soluzione partendo dal tuo esempio:

<!DOCTYPE HTML>
<html>
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <style type="text/css">

         body { 
            margin: 0; 
         }

         section {
           display: flex;
           flex-flow: column;
           height: 100vh;
           overflow:hidden
         }

         .logo {
            width: 100%;
            height: 500px;
            background: blue url('http://via.placeholder.com/500x500') center/contain no-repeat;
         }

         .content {
            flex-grow: 1;
            background: lightgreen;
         }

      </style>
   </head>
   <body>
      <section>
         <div class="logo"></div>
         <div class="content">
            questo contenuto deve essere sempre visibile, in caso non ci fosse spazio ad essere ridimensionato DEVE essere il div.logo
            <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
         </div>
      </section>
   </body>
</html>

PS: occhio che gli elementi <section> dovrebbero sempre essere corredati da un relativo elemento di intestazione (<hN>), altrimenti il validatore segnala questa mancanza con un'avvertenza.

[jimbo0]

section è usato solo nel codice postato come esempio..come ho detto in realtà l'applicazione è in ionic (quindi viene impacchettata in un apk, il codice html non verrà validato )
comunque il tuo esempio fa esattamente quello che mi serve!

dubbio: ho provato a commentare flex-shrink..il tuo codice si comporta esattamente alla stessa maniera

[KillerWorm]

dubbio: ho provato a commentare flex-shrink..il tuo codice si comporta esattamente alla stessa maniera

Sì, hai ragione. Probabilmente è rimasto da qualche mia precedente prova; non so perché, ho pensato servisse a qualcosa.
Al posto di quello potrebbe invece servire flex-grow:1, che estende l'elemento per tutto lo spazio disponibile, se dovesse essercene bisogno.

Ho editato il precedente post col codice corretto. Grazie per avermelo fatto notare.

[jimbo0]

grazie a te! tra l'altro ero convinto di aver provato size:background-contain si vede che c'era qualche errore altrove..stavo cominciando a credere non ci fosse modo di risolvere senza javascript