CSS: mantenere le proporzioni senza traboccare contenuti

Question

Sto usando CSS e voglio creare una casella con un certo rapporto che viene tenuto non importa la dimensione della casella. Ma voglio anche che la casella per cresca se c'è più contenuto in esso.

Per summerize in altri termini:

• CSS solo (se possibile)
• preservare determinate proporzioni
• permettono casella a crescere se v'è più contenuto (con rapporto)

---

In quelle tecniche che ho provato finora il contenuto della scatola non sono in grado di far crescere la scatola. Invece le mie uniche opzioni sono la sovrapposizione o il ritaglio del contenuto.

1. Padding-ratio Hack
2. Viewport based units
3. Replaced Element Scale Hack

Il primo e il terzo metodo sono preoccupante lo spazio interno di un involucro e il contenuto è posto in cima che utilizzando una posizione assoluta. Poiché il contenuto è assolutamente posizionato, viene rimosso dal flusso del documento. Pertanto non è in grado di espandere l'elemento di avvolgimento.

La seconda opzione utilizza un'altezza fissa, che non consente al contenuto di crescere oltre.

Here is a demo using the second option. (based on viewport units)

* {margin: 0; padding: 0;} 
 
div{ 
 
    width: 50vmin; height: 50vmin; 
 

 
    font-size: 30px; 
 
    background: #ccc; 
 
    margin: auto; 
 
    padding: 3%; 
 
}

<div> 
 
<p>If you scale your window, you will see that the text does not fit into the box at some point, and therefore the text will be overlapping the box.<p> 
 
</div>

Maggiori Metodi I parzialmente testati:

• oggetto-fit posizionamento
• FlexBox

L'adattamento dell'oggetto influisce solo sugli elementi sostituiti, per quanto ne so. Non riesco a ottenere alcun effetto sui miei div/p-elementi con queste proprietà.

Flexbox non è pratico neanche per il mio scenario. Secondo il mio attuale livello di conoscenza, flexbox non aiuta molto bene qui. Poiché si tratta principalmente di stabilire relazioni tra più oggetti. Ma non ne sono sicuro. Forse c'è qualcosa in flexbox di cui non sono ancora a conoscenza.

Answer 1

Aggiornamento

OP è ora sottolineando l'importanza del testo, ecco il mio prendere:

• Utilizzando un background-image e background-size:contain.
• figure ha la background-sizedbackground-image
• figcaption sta tenendo il testo.
• Questo particolare png è 800x600 AR 4: 3 che mantiene in modo ammirevole.
• Il testo scorre bene tra le ridimensionazioni e l'inevitabile trabocco del testo viene interrotto, ma non violare mai i bordi.

Plunker

frammento

@font-face { 
 
    font-family: EraserRegular; 
 
    src: url(http://glpjt.s3.amazonaws.com/so/font/EraserRegular.ttf); 
 
} 
 
html { 
 
    box-sizing: border-box; 
 
    font: 500 16px/1.428'EraserRegular'; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    position: relative; 
 
    font-size: 1rem; 
 
    line-height: 1; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6, 
 
legend { 
 
    font-variant: small-caps; 
 
    margin-bottom: 15px; 
 
} 
 
h1 { 
 
    font-size: 1.5rem; 
 
} 
 
h2 { 
 
    font-size: 1.4rem; 
 
} 
 
h3 { 
 
    font-size: 1.3rem; 
 
} 
 
legend { 
 
    font-size: 1.35rem; 
 
} 
 
p { 
 
    margin: 0 5px 15px; 
 
} 
 
img { 
 
    display: inline-block; 
 
    width: 25em; 
 
    height: auto; 
 
    margin: 20px 0; 
 
} 
 
a { 
 
    color: #Fc0; 
 
    text-decoration: none; 
 
    margin: 10px 20px; 
 
    display: inline-block; 
 
} 
 
a:hover { 
 
    color: #CCC; 
 
} 
 
button { 
 
    font: inherit; 
 
    line-height: 1.5; 
 
    padding: 1px 3px; 
 
    border-radius: 8px; 
 
    border: 1px solid #fc2; 
 
} 
 
.noSel { 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    user-select: none; 
 
} 
 
code * { 
 
    font: 100 1rem/1.5'Consolas'; 
 
    color: #6F3; 
 
    background: #777; 
 
    border: 2px inset #CCC; 
 
    margin: 10px 10px 15px 15px; 
 
} 
 
.board { 
 
    width: 100%; padding-bottom: 75%; height: 0; position: relative; background: url(http://i.imgur.com/gUobVE5.png) center center no-repeat; background-size: contain; } 
 
    figcaption { 
 
    font-size: 100%; 
 
    color: white; 
 
    text-align: left; 
 
    position: absolute; 
 
    z-index: 1; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    padding: 40px 30px; 
 
    }

<figure class="board"> 
 
    <figcaption>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
 
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
 
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
 
    TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST 
 
    TEST TEST TEST TEST TEST TEST TEST</figcaption> 
 
</figure>

due oggetti vengono in mente è object-fit: contain e background-size:contain unitamente background-image Il valore contain invoca una certa Comportamento:

background-size/-immagine

figure { 
 
    background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) center center no-repeat; 
 
    -moz-background-size: contain; 
 
    background-size: contain; 
 
    width: 9em; 
 
    height: 9em; 
 
} 
 
code { font: 400 14px/1.3 'Consolas'; background: #ccc; }

<figure></figure> 
 
<figcaption><code>background-image</code> and <code>background-size:contain</code> also maintains it's AR;<br> fixed lengths are not required; <br>this is for replaced objects like images and videos</figcaption>

più di sfondo-immagini

section { width: 100vw; height: 100vh; display:table; } 
 
.shirley_lenna { 
 
    background: url(http://4.bp.blogspot.com/_xyCeswQjRbc/TTTtaB5t2vI/AAAAAAAACCc/lc_kHPTSnSg/s1600/Shirley+02.jpg) left center no-repeat, url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) right center no-repeat; 
 
    background-size: contain; 
 
    width: 100vw; 
 
    min-height: 20em; 
 
    display: table-cell; 
 
}

<section> 
 
<figure class="shirley_lenna"></figure> 
 
    
 
    </section>

oggetto-fit

img { 
 
    width: 140px; 
 
    height: 140px; 
 
    border: solid 1px white; 
 
    object-fit: cover; 
 
} 
 

 
code { font: 400 14px/1.3 'Consolas'; background: #ccc; }

<figure> 
 
<img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png"> 
 
<figcaption><code>object-fit</code> maintains AR;<br> must use fixed width and height;<br> for replaced objects like img, video, etc.</figcaption></figure>