CSS obtenir un widget fluide en largeur

Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Entraide Développement Développement Langage PHP CSS obtenir un widget fluide en largeur

3 réponses

Une Bévue

14/02/2017 à 07:38

J'aimerais un widget qui, en fixant *** une seule largeur ***, celle du
canvas, suive cette largeur tout en étant centré dans la page,
symboliquement le widget (qui apparaît en pseudo mode mpdal) est
structuré ainsi :

<div class="cropperWrapper">
<p class="cropperWrapper-row">
<span class="cropperWrapper-icon"><-- icône close --></span>
</p>
<canvas height="400" width variable />
<p class="cropperWrapper-row">
<span class="cropperWrapper-icon"><-- input type="range" --></span>
</p>
<p class="cropperWrapper-row">
<span class="cropperWrapper-icon"><-- icône save --></span>
</p>
</di>

ce que ça donne pour l'instant :
<http://www.cjoint.com/doc/17_02/GBogG5d8y4X_avatarCropper.png>

avec le code css :
.avatarCropperWrapper {
position: absolute;
left: calc(50% - 220px);
top: 48px;
width: 440px;
background-color: rgba(128, 128, 128, 0.5);
border-radius: .5em;
z-index: 2;
}
.avatarCropperWrapper-row {
width: 100%;
height: 28px;
line-height: 28px;
}
.avatarCropperWrapper .avatarCropperWrapper-row .avatarCropperWrapper-icon {
display: block;
float: right;
width: 28px;
height: 28px;
padding: 2px;
border-radius: 4px;
vertical-align: middle;
}
.avatarCropperWrapper .avatarCropperWrapper-row
.avatarCropperWrapper-icon:hover {
background-color: rgba(255, 64, 128, 0.5);
}
.avatarCropperWrapper [type=range] {
width: 400px;
}
.avatarCropperWrapper-scale {
float: left;
margin-left: 20px;
}
.avatarCropperWrapper .avatarCropperWrapper-row:last-child {
margin-bottom: 6px;
}

le code html :
<div class="avatarCropperWrapper"><p
class="avatarCropperWrapper-row"><span
class="avatarCropperWrapper-icon"><svg viewBox="0 0 100 100"
class="svg_24 svg_red"><use
xlink:href="icons/sprite.svg#close"></use></svg></span></p><canvas
id="canvas" width="400" height="400"></canvas><p
class="avatarCropperWrapper-row"><input value="100" min="100" max="500"
step="10" type="range"></p><p class="avatarCropperWrapper-row"><span
class="avatarCropperWrapper-scale">Échelle: 100 %</span><span
class="avatarCropperWrapper-icon"><svg viewBox="0 0 100 100"
class="svg_24 svg_red"><use
xlink:href="icons/sprite.svg#crop"></use></svg></span></p></div>

donc là c'est pour ccropper une image avec un résultat souhaité en 1 / 1
c'est-à-dire une image carrée.
si une personne veut du 16 / 9 alors l'interface ne changera pas la
hauteur du canvas fixée à 400 px, par contre sa largeur passera à 400 *
16 / 9

je voudrais donc que mon widget s'élargissement d'autant, si possible
avec une seule valeur changée.

Est-ce possible ?

3 réponses

Une Bévue

15/02/2017 à 14:10

Le 14/02/2017 à 07:38, Une Bévue a écrit :

je voudrais donc que mon widget s'élargissement d'autant, si possible
avec une seule valeur changée.
Est-ce possible ?

oui, avec flex, ça commence à marcher :
avec une image en 200x200 :
<http://www.cjoint.com/doc/17_02/GBpngmHq0xX_avatarCropper-200x200.png>
avec une image en 400x400 :
<http://www.cjoint.com/doc/17_02/GBpnhZSyHmX_avatarCropper-400x400.png>
avec une image en 600x600 :
<http://www.cjoint.com/doc/17_02/GBpni68RNVX_avatarCropper-600x600.png>
reste à trouver le centrage vertical, ce serait plus zoli ))

Une Bévue

15/02/2017 à 14:20

Le 15/02/2017 à 14:10, Une Bévue a écrit :

reste à trouver le centrage vertical, ce serait plus zoli ))

ma page de test :
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.avatarCropper {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(66, 66, 66, 0.5);
}
.avatarCropperOutsideWrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: .5em;
}
.avatarCropperOutsideWrapperEmptyMargin {
width: 100%;
min-height: 48px;
background-color: tranparent;
}
.avatarCropperOutsideWrapperMargin {
width: 100%;
height: 20px;
background-color: blue;
}
.avatarCropperOutsideWrapperMargin:first-child {
border-top-left-radius: .5em;
border-top-right-radius: .5em;
}
.avatarCropperOutsideWrapperMargin:last-child {
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
}
.avatarCropperInsideWrapper {
display: flex;
justify-content: center;
min-width: 240px;
background-color: pink;
margin: auto;
z-index: 2;
}
.avatarCropperMarginVertical {
width: 20px;
background-color: red;
flex: initial;
}
.avatarCropperContentRow {
padding: 0;
}
[type=range] {
width: 100%;
}
</style>
</head>
<body>

<div class="avatarCropper">
<div class="avatarCropperOutsideWrapper">
<div class="avatarCropperOutsideWrapperEmptyMargin"></div>
<div class="avatarCropperOutsideWrapperMargin"></div>
<div class='avatarCropperInsideWrapper'>
<div class="avatarCropperMarginVertical"></div>
<div class="avatarCropperContent">
<p class="avatarCropperContentRow"><img
src="Yvon_600x600.png" alt="" /></p>
<p class="avatarCropperContentRow"><input type="range"
min="100" max="500" step="10" defaultValue="100" /></p>
</div>
<div class="avatarCropperMarginVertical"></div>
</div>
<div class="avatarCropperOutsideWrapperMargin"></div>
<div class="avatarCropperOutsideWrapperEmptyMargin"></div>
</div>
</div>

</body>
</html>

Le 15/02/2017 à 14:10, Une Bévue a écrit :

reste à trouver le centrage vertical, ce serait plus zoli ))

ma page de test :

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.avatarCropper {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(66, 66, 66, 0.5);
}
.avatarCropperOutsideWrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: .5em;
}
.avatarCropperOutsideWrapperEmptyMargin {
width: 100%;
min-height: 48px;
background-color: tranparent;
}
.avatarCropperOutsideWrapperMargin {
width: 100%;
height: 20px;
background-color: blue;
}
.avatarCropperOutsideWrapperMargin:first-child {
border-top-left-radius: .5em;
border-top-right-radius: .5em;
}
.avatarCropperOutsideWrapperMargin:last-child {
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
}
.avatarCropperInsideWrapper {
display: flex;
justify-content: center;
min-width: 240px;
background-color: pink;
margin: auto;
z-index: 2;
}
.avatarCropperMarginVertical {
width: 20px;
background-color: red;
flex: initial;
}
.avatarCropperContentRow {
padding: 0;
}
[type=range] {
width: 100%;
}
</style>
</head>
<body>

<div class="avatarCropper">
<div class="avatarCropperOutsideWrapper">
<div class="avatarCropperOutsideWrapperEmptyMargin"></div>
<div class="avatarCropperOutsideWrapperMargin"></div>
<div class='avatarCropperInsideWrapper'>
<div class="avatarCropperMarginVertical"></div>
<div class="avatarCropperContent">
<p class="avatarCropperContentRow"><img
src="Yvon_600x600.png" alt="" /></p>
<p class="avatarCropperContentRow"><input type="range"
min="100" max="500" step="10" defaultValue="100" /></p>
</div>
<div class="avatarCropperMarginVertical"></div>
</div>
<div class="avatarCropperOutsideWrapperMargin"></div>
<div class="avatarCropperOutsideWrapperEmptyMargin"></div>
</div>
</div>



</body>
</html>

Vous avez filtré cet utilisateur ! Consultez son message

Le 15/02/2017 à 14:10, Une Bévue a écrit :

reste à trouver le centrage vertical, ce serait plus zoli ))

ma page de test :
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.avatarCropper {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(66, 66, 66, 0.5);
}
.avatarCropperOutsideWrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: .5em;
}
.avatarCropperOutsideWrapperEmptyMargin {
width: 100%;
min-height: 48px;
background-color: tranparent;
}
.avatarCropperOutsideWrapperMargin {
width: 100%;
height: 20px;
background-color: blue;
}
.avatarCropperOutsideWrapperMargin:first-child {
border-top-left-radius: .5em;
border-top-right-radius: .5em;
}
.avatarCropperOutsideWrapperMargin:last-child {
border-bottom-left-radius: .5em;
border-bottom-right-radius: .5em;
}
.avatarCropperInsideWrapper {
display: flex;
justify-content: center;
min-width: 240px;
background-color: pink;
margin: auto;
z-index: 2;
}
.avatarCropperMarginVertical {
width: 20px;
background-color: red;
flex: initial;
}
.avatarCropperContentRow {
padding: 0;
}
[type=range] {
width: 100%;
}
</style>
</head>
<body>

<div class="avatarCropper">
<div class="avatarCropperOutsideWrapper">
<div class="avatarCropperOutsideWrapperEmptyMargin"></div>
<div class="avatarCropperOutsideWrapperMargin"></div>
<div class='avatarCropperInsideWrapper'>
<div class="avatarCropperMarginVertical"></div>
<div class="avatarCropperContent">
<p class="avatarCropperContentRow"><img
src="Yvon_600x600.png" alt="" /></p>
<p class="avatarCropperContentRow"><input type="range"
min="100" max="500" step="10" defaultValue="100" /></p>
</div>
<div class="avatarCropperMarginVertical"></div>
</div>
<div class="avatarCropperOutsideWrapperMargin"></div>
<div class="avatarCropperOutsideWrapperEmptyMargin"></div>
</div>
</div>

</body>
</html>

Une Bévue

15/02/2017 à 16:59

Le 15/02/2017 à 14:10, Une Bévue a écrit :

reste à trouver le centrage vertical, ce serait plus zoli ))

une première solution :
en 200x200 :
<http://www.cjoint.com/doc/17_02/GBpp0XaGRXG_avatarCropper-200x200.png>
en 400x400 :
<http://www.cjoint.com/doc/17_02/GBpp2YFrteG_avatarCropper-400x400.png>
en 600x400 :
<http://www.cjoint.com/doc/17_02/GBpp4b7FZfG_avatarCropper-600x400.png>
en 600x600 :
<http://www.cjoint.com/doc/17_02/GBpp5qUumJG_avatarCropper-600x600.png>
le css n'est sans doute pas optimum (le + court) mais bon ça roule...
la clé a été de positionner une élément en absolu et de lui donner toute
la fenêtre :
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
le html+css complet :
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
.avatarCropper {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(66, 66, 66, 0.5);
height: 100%;
line-height: 100%;
margin: auto;
}
.avatarCropperEmptyMargin {
width: 100%;
min-height: 48px;
flex-grow: 1;
background-color: tranparent;
}
.avatarCropperOutsideWrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: .5em;
background-color: rgba(33, 33, 33, 0.5);
box-shadow: 10px 10px 20px 0 rgba(66, 66, 66, 0.5);
}
.avatarCropperOutsideWrapperMargin {
width: 100%;
height: 24px;
}
.avatarCropperOutsideWrapperComment {
float: left;
padding-left: 24px;
height: 20px;
line-height: 20px;
margin: 2px;
}
.avatarCropperOutsideWrapperIcon {
float: right;
}
.avatarCropperOutsideWrapperIcon svg {
margin: 2px;
width: 20px;
height: 20px;
z-index: 33;
}
.avatarCropperInsideWrapper {
display: flex;
justify-content: center;
min-width: 248px;
margin: auto;
z-index: 2;
}
.avatarCropperMarginVertical {
width: 24px;
flex: initial;
}
.avatarCropperContentRow {
padding: 0;
}
[type=range] {
width: 100%;
}
</style>
</head>
<body>

<div class="avatarCropper">
<div class="avatarCropperEmptyMargin"></div>
<div class="avatarCropperOutsideWrapper">
<div class="avatarCropperOutsideWrapperMargin">
<span class="avatarCropperOutsideWrapperIcon"><svg viewBox="0
0 100 100"><use xlink:href="sprite.svg#close"></use></svg></span>
</div>
<div class='avatarCropperInsideWrapper'>
<div class="avatarCropperMarginVertical"></div>
<div class="avatarCropperContent">
<p class="avatarCropperContentRow"><img
src="Yvon_600x400.png" alt="" /></p>
<p class="avatarCropperContentRow"><input type="range"
min="100" max="500" step="10" defaultValue="100" /></p>
</div>
<div class="avatarCropperMarginVertical"></div>
</div>
<div class="avatarCropperOutsideWrapperMargin">
<span class="avatarCropperOutsideWrapperComment">Échelle :
50%</span>
<span class="avatarCropperOutsideWrapperIcon"><svg viewBox="0
0 100 100"><use xlink:href="sprite.svg#crop"></use></svg></span>
</div>
</div>
<div class="avatarCropperEmptyMargin"></div>
</div>
</body>
</html>

Le 15/02/2017 à 14:10, Une Bévue a écrit :

reste à trouver le centrage vertical, ce serait plus zoli ))

une première solution :

en 200x200 :
<http://www.cjoint.com/doc/17_02/GBpp0XaGRXG_avatarCropper-200x200.png>

en 400x400 :
<http://www.cjoint.com/doc/17_02/GBpp2YFrteG_avatarCropper-400x400.png>

en 600x400 :
<http://www.cjoint.com/doc/17_02/GBpp4b7FZfG_avatarCropper-600x400.png>

en 600x600 :
<http://www.cjoint.com/doc/17_02/GBpp5qUumJG_avatarCropper-600x600.png>

le css n'est sans doute pas optimum (le + court) mais bon ça roule...

la clé a été de positionner une élément en absolu et de lui donner toute
la fenêtre :
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;

le html+css complet :

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
.avatarCropper {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(66, 66, 66, 0.5);
height: 100%;
line-height: 100%;
margin: auto;
}
.avatarCropperEmptyMargin {
width: 100%;
min-height: 48px;
flex-grow: 1;
background-color: tranparent;
}
.avatarCropperOutsideWrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: .5em;
background-color: rgba(33, 33, 33, 0.5);
box-shadow: 10px 10px 20px 0 rgba(66, 66, 66, 0.5);
}
.avatarCropperOutsideWrapperMargin {
width: 100%;
height: 24px;
}
.avatarCropperOutsideWrapperComment {
float: left;
padding-left: 24px;
height: 20px;
line-height: 20px;
margin: 2px;
}
.avatarCropperOutsideWrapperIcon {
float: right;
}
.avatarCropperOutsideWrapperIcon svg {
margin: 2px;
width: 20px;
height: 20px;
z-index: 33;
}
.avatarCropperInsideWrapper {
display: flex;
justify-content: center;
min-width: 248px;
margin: auto;
z-index: 2;
}
.avatarCropperMarginVertical {
width: 24px;
flex: initial;
}
.avatarCropperContentRow {
padding: 0;
}
[type=range] {
width: 100%;
}
</style>
</head>
<body>

<div class="avatarCropper">
<div class="avatarCropperEmptyMargin"></div>
<div class="avatarCropperOutsideWrapper">
<div class="avatarCropperOutsideWrapperMargin">
<span class="avatarCropperOutsideWrapperIcon"><svg viewBox="0
0 100 100"><use xlink:href="sprite.svg#close"></use></svg></span>
</div>
<div class='avatarCropperInsideWrapper'>
<div class="avatarCropperMarginVertical"></div>
<div class="avatarCropperContent">
<p class="avatarCropperContentRow"><img
src="Yvon_600x400.png" alt="" /></p>
<p class="avatarCropperContentRow"><input type="range"
min="100" max="500" step="10" defaultValue="100" /></p>
</div>
<div class="avatarCropperMarginVertical"></div>
</div>
<div class="avatarCropperOutsideWrapperMargin">
<span class="avatarCropperOutsideWrapperComment">Échelle :
50%</span>
<span class="avatarCropperOutsideWrapperIcon"><svg viewBox="0
0 100 100"><use xlink:href="sprite.svg#crop"></use></svg></span>
</div>
</div>
<div class="avatarCropperEmptyMargin"></div>
</div>

</body>
</html>

Vous avez filtré cet utilisateur ! Consultez son message

Le 15/02/2017 à 14:10, Une Bévue a écrit :

reste à trouver le centrage vertical, ce serait plus zoli ))

une première solution :
en 200x200 :
<http://www.cjoint.com/doc/17_02/GBpp0XaGRXG_avatarCropper-200x200.png>
en 400x400 :
<http://www.cjoint.com/doc/17_02/GBpp2YFrteG_avatarCropper-400x400.png>
en 600x400 :
<http://www.cjoint.com/doc/17_02/GBpp4b7FZfG_avatarCropper-600x400.png>
en 600x600 :
<http://www.cjoint.com/doc/17_02/GBpp5qUumJG_avatarCropper-600x600.png>
le css n'est sans doute pas optimum (le + court) mais bon ça roule...
la clé a été de positionner une élément en absolu et de lui donner toute
la fenêtre :
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
le html+css complet :
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
.avatarCropper {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(66, 66, 66, 0.5);
height: 100%;
line-height: 100%;
margin: auto;
}
.avatarCropperEmptyMargin {
width: 100%;
min-height: 48px;
flex-grow: 1;
background-color: tranparent;
}
.avatarCropperOutsideWrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: .5em;
background-color: rgba(33, 33, 33, 0.5);
box-shadow: 10px 10px 20px 0 rgba(66, 66, 66, 0.5);
}
.avatarCropperOutsideWrapperMargin {
width: 100%;
height: 24px;
}
.avatarCropperOutsideWrapperComment {
float: left;
padding-left: 24px;
height: 20px;
line-height: 20px;
margin: 2px;
}
.avatarCropperOutsideWrapperIcon {
float: right;
}
.avatarCropperOutsideWrapperIcon svg {
margin: 2px;
width: 20px;
height: 20px;
z-index: 33;
}
.avatarCropperInsideWrapper {
display: flex;
justify-content: center;
min-width: 248px;
margin: auto;
z-index: 2;
}
.avatarCropperMarginVertical {
width: 24px;
flex: initial;
}
.avatarCropperContentRow {
padding: 0;
}
[type=range] {
width: 100%;
}
</style>
</head>
<body>

<div class="avatarCropper">
<div class="avatarCropperEmptyMargin"></div>
<div class="avatarCropperOutsideWrapper">
<div class="avatarCropperOutsideWrapperMargin">
<span class="avatarCropperOutsideWrapperIcon"><svg viewBox="0
0 100 100"><use xlink:href="sprite.svg#close"></use></svg></span>
</div>
<div class='avatarCropperInsideWrapper'>
<div class="avatarCropperMarginVertical"></div>
<div class="avatarCropperContent">
<p class="avatarCropperContentRow"><img
src="Yvon_600x400.png" alt="" /></p>
<p class="avatarCropperContentRow"><input type="range"
min="100" max="500" step="10" defaultValue="100" /></p>
</div>
<div class="avatarCropperMarginVertical"></div>
</div>
<div class="avatarCropperOutsideWrapperMargin">
<span class="avatarCropperOutsideWrapperComment">Échelle :
50%</span>
<span class="avatarCropperOutsideWrapperIcon"><svg viewBox="0
0 100 100"><use xlink:href="sprite.svg#crop"></use></svg></span>
</div>
</div>
<div class="avatarCropperEmptyMargin"></div>
</div>
</body>
</html>

CSS obtenir un widget fluide en largeur

3 réponses

Veuillez sélectionner un problème