0
Je suis en train de faire les images sont redimensionnés pour adapter le navigateur comme l'arrière-plan-image à l'aideCSS: image css réajustera navigateur
max-width:100%; height:auto; max-height:100%;
Cependant, les images ne sont pas redimensionnés pour adapter à l'écran et j'ai essayé d'ajuster la taille du navigateur. Les images iraient partout. Je veux que les images restent au même endroit quand un redimensionnement se produit. Des idées sur ce que j'ai pu manquer?
body{
background: url(http://www.planwallpaper.com/static/images/518169-backgrounds.jpg)no-repeat center center fixed;
background-size: 100%;
}
.boat2{
width: 400px;
position:absolute; bottom: 160px; left: 800px;z-index: 1;
}
.cabbage{
width: 150px;
position:absolute; bottom: 290px; right: 290px;z-index: 1;
}
.sheep{
width: 150px;
position:absolute; bottom: 300px; right: 180px;z-index: 1;
}
.wolf{
width: 300px;
position:absolute; bottom: 270px; right: -80px;z-index: 1;
}
img {
max-width:100%;
height:auto;
max-height:100%;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>IQ River Crossing</title>
</head>
<body>
<div class="image">
<img class="boat2"src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
<img class="cabbage" src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
<img class="sheep" src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
<img class="wolf" src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
</div>
</body>
</html>
Votre code semble avoir la largeur et les corrections appliquées aux images.et cela fonctionne en fonction de ce code.Votre css semble être totalement faux pour l'intention que vous avez mentionné ou j'ai mal compris votre question. Pourriez-vous le préciser? –
Lorsque vous réduisez la taille du navigateur, la feuille rose dans l'image d'arrière-plan réduit également sa taille. Je veux que les images vertes réduisent en taille juste comme cette feuille. – begincoding123
En outre, je veux que les images vertes restent au même endroit lorsque le navigateur est en train de se redimensionner. Disons simplement que les images vertes sont sur la feuille rose. Je veux que les images vertes restent exactement au-dessus de la feuille rose (même position) lors du redimensionnement du navigateur – begincoding123