J'ai du code dans lequel il y a une boîte de classe, j'ai donné une backgroundimage à class box1 .
mon problème est que l'image ne s'adapte pas correctement à l'intérieur du tableau .
lorsque je rezize la fenêtre, elle se déplace vers le haut .
Comment le corriger.
Comment faire en sorte que l'image s'intègre correctement à l'intérieur du tableau sans perdre de réactivité ?
quelle est la méthode pour le faire, lorsque j'essaie de l'adapter à l'intérieur du tableau, il ne s'adapte pas seulement à l'intérieur de la boîte, mais perd également sa réactivité ..
quand on essaie de redimensionner la fenêtre, l'image se déplace vers le haut ..
p>
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">
<div class="box box1" id="box1" style="background-image:url(https://picsum.photos/200/300);">
<p name="values" id="name1" class="hidden"></p>
</div>
</div>
</div>
</div>
html, body {
background-image:url(https://i.ibb.co/K7mpxZG/background9.jpg);
background-repeat: no-repeat;
background-size: cover;
width:100%;
height:100%;
overflow: hidden;
background-size: 100vw 100vh;
}
#box1 {
position: absolute;
top: 55.3vh;
left: -19.98vw;
cursor: pointer;
border:px solid #0066CC;
background-repeat: no-repeat;
background-size: cover;
}
#box1 p {
width: 10.0vw;
height: 1.0vh;
border-radius: 25%;
}
#container {
white-space: nowrap;
border:px solid #CC0000;
}
.containerr {
border: px solid #FF3399;
}
.container2 {
width: 50.1vw;
position: fixed;
top: 10.5vh;
left: 30.5vw;
}
.box p {
font-size: calc(2vw + 10px);
}
.hidden{
visibility: hidden;
}
p {
font: "Courier New", Courier, monospace;
font-size: 5vw;
color: blue;
text-align: center;
}
3 Réponses :
Si vous voulez que votre image recouvre son conteneur, vous pouvez utiliser background-size: cover; ,
Si vous voulez vous assurer que l'image entière est affichée (mais en cours de redimensionnement si nécessaire), vous pouvez utiliser background-size: contain;
Les deux éléments ci-dessus nécessitent largeur et hauteur explicites dans la classe box1
Je vois que votre tableau fait partie de l'arrière-plan de votre classe de corps, lorsque vous redimensionnez la fenêtre, l'image d'arrière-plan deviendra plus petite mais la taille de l'image sur votre tableau ne changera pas. Je vais vous suggérer de prendre le tableau comme une image séparée.
Je vous suggère de donner à votre corps une position de fond en fonction de vos besoins. généralement le centrer est le meilleur choix:
<div></div>
Vous pouvez voir comment cela fonctionne en regardant l'extrait de code. redimensionner l'image par sa poignée en bas à droite.
div{
background-image: url('//unsplash.it/500');
background-size:cover;
background-position:center;
resize:both;
overflow:auto;
width:100%;
height:200px;
}
background-position: center center;
quand je donne background-position: center; au corps, l'image se déplace toujours vers le haut lorsque je redimensionne la fenêtre
si vous montrez votre concept dans mon extrait, ce serait génial
Je pense que vous vous y prenez de la mauvaise façon. Je voudrais plutôt extraire l'élément board de l'arrière-plan principal et l'utiliser comme élément seul:
<div id="container"> <div class="box"> </div> </div>
html {
background: linear-gradient(to right,pink, lightblue);
}
#container {
position: fixed;
bottom: 0;
left: 100px;
background: url(https://i.stack.imgur.com/ctB0T.png) top/contain no-repeat;
height: 50vh;
width: 29vh;
max-width: 20vw;
max-height: 35vw;
}
.box {
padding-top: 173%;
background: url(https://picsum.photos/200/300) 50% 5%/86% 27% no-repeat;
}
Voici une version transparente
<div id="container"> <div class="box"> </div> </div>
html {
background: #afffdc;
}
#container {
position: fixed;
bottom: 0;
left: 100px;
background: url(https://i.stack.imgur.com/CM15R.jpg) top/contain no-repeat;
height: 50vh;
width: 29vh;
max-width: 20vw;
max-height: 35vw;
}
.box {
padding-top: 173%;
background: url(https://picsum.photos/200/300) 50% 5%/86% 27% no-repeat;
}
vous avez utilisé l'arrière-plan: #afffdc; pour html mais cela ne peut pas être appliqué pour ma tâche, en fait si j'utilise un arrière-plan personnalisé avec des bâtiments et que je veux placer une image à l'intérieur de ce tableau .. que dois-je faire? alors cette méthode ne peut pas être appliquée savoir?
@Jupiter cela peut s'appliquer, changez simplement l'arrière-plan avec ce que vous voulez et faites en sorte que le large que j'ai utilisé ait une couleur transparente au lieu de #afffdc
@Jupiter j'ai mis à jour avec une version transparente. J'ai utilisé un dégradé que vous pouvez facilement remplacer par n'importe quelle image
@Jupiter oui, j'ai utilisé Gimp pour supprimer l'arrière-plan, puis l'enregistrer au format PNG prenant en charge la transparence
50% 5% / 86% 27% cela dénote?
@Jupiter 50% 5% est la position de l'arrière-plan (en haut à gauche) et 86% 27% est la taille de l'arrière-plan (largeur hauteur)
@Jupiter si vous voulez comprendre comment les pourcentages sont calculés, vous pouvez lire ceci: stackoverflow.com/a/51734530/8620333
essayez de définir la taille de votre arrière-plan sur l'une des options
coveroucontainet voyez celle que vous préférez@jhecht j'ai défini le # box1: background-size:
contain; mais ne fonctionne pas@jhecht # box1: background-size: `cover
; a fonctionné maisl'image se déplace vers le haut` quand jerezise la fenêtrecommentla corriger?Je suggérerai au lieu d'utiliser l'image d'arrière-plan d'essayer de créer ce tableau en css. merci .. cela pourrait amener un autre élément à se comporter bizarrement merci.
@ xenio-gracias c'est une bonne méthode merci pour ça .... maintenant dans mon extrait de code, thw
l'image se déplace vers le hautquand jerezise la fenêtre..est-il un moyen le corriger? Merci d'avanceCe n'est pas la bonne façon de procéder. Vous devez utiliser une autre approche pour que cela fonctionne. Merci