PUBLIC MARKS from decembre with tags resize & css

Textarea Tricks , 2010

Fortunately, CSS3 introduces the background-size property which allows backgrounds to be stretched or squashed. It’s ideal if you’re creating a template using Responsive Web Design techniques. There are several ways to define sizing dimensions — view the CSS3 background-size demonstration page.

Use the form below to calculate the missing value for a particular aspect ratio. This is useful, for example, when resizing photos or video. Formula Say you have a photo that is 1600 x 1200 pixels, but your blog only has space for a photo 400 pixels wide. To find the new height of your photo—while preserving the aspect ratio—you would need to do the following calculation: (original height / original width) x new width = new height___ (1200 / 1600) x 400 = 300__By example 742 : 349 ___

maintaining the assigned aspect ratio as it resizes. .sixteen-nine { position: relative; } .sixteen-nine:before { display: block; content: ""; width: 100%; padding-top: 56.25%; } .sixteen-nine > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

Solution pour des éléments flexibles qui gardent leurs proportions lors du redimensionnement . Jusqu'à présent, j'ai utilisé Javascript pour le redimensionnement des éléments. Mais l'utilisation de l'événement "resize" et "recalculate" pour la hauteur d'un élément est mauvais.... lors, qu'est- ce que c'est? SOLUTION : Définir un élément pseudo pour notre boîte et lui donner un margin-top de 100%. Cette valeur 100% se rapporte à la largeur de l' élément ... vous obtenez ( hauteur : 0; padding-bottom : 100%; devrait également fonctionner, mais vous devez alors ajuster la valeur padding-bottom chaque fois que vous modifiez la largeur ) . Donc, notre boîte est déjà plus élevé que large .../