2 votes

L'image à l'intérieur d'un div se redimensionne lorsque la fenêtre change de taille DESIGN RÉPONSIF

Voici mon problème / question / scénario / quelque chose que je n'arrive pas à comprendre depuis trois heures maintenant.

http://jsfiddle.net/5f6dK/

Voici le css :

header {
    width:100%;
    height:95px;
    color:#FFF;
    position:fixed;
    width:100%;
    background:#3b5998;
    display:block;
    z-index:99999;
    top:0px;
    border-bottom:1px solid ##133783;
    float:left;
}

.inner-header {
    margin:0px auto !important;
    width:100%;
    height:95px;
    max-width:1400px;
    min-width:700px;
    padding:0 10px 0 10px;
}

.header-logo{
    padding-right:10px;
    width:100% auto;
}

img#header1280-1366 {
    width:100%;
}

.header-logo, .xbdlogo {
    float:left;
}

.header-adsense {
    float:left;
}

.xbdlogo {
    top:-100px;
    display:block;
    position:relative;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    overflow:auto;
    margin-right:10px;
}

.header-logo:hover + .xbdlogo {
    top:30px;
}

.header-adsense {
    padding-top:2px;
}

Il s'agit d'un en-tête de site web.

Le problème :

L'en-tête se compose de 3 éléments, les deux logos d'en-tête et les annonces adsense.

Je veux le rendre réactif, chaque fois que l'utilisateur redimensionne la fenêtre, est-il possible que le PNG BENDAGGERS se redimensionne en une image plus petite. J'ai réglé la largeur à 100 %, mais cela ne fonctionne pas.

Une suggestion sur la manière de le faire ?

Aidez-nous ! J'apprécie votre aide ! :)

1voto

ralph.m Points 7815

Je veux qu'il soit réactif, chaque fois que l'utilisateur redimensionne la fenêtre, est-il possible que le PNG BENDAGGERS soit redimensionné en une image plus petite. J'ai réglé la largeur à 100 %, mais cela ne fonctionne pas.

L'image se trouve à l'intérieur d'un div flottant, qui s'enroule à la taille de l'image, donc dans cette situation width: 100% ne peut être aussi grande que l'image elle-même. Si vous ne laissiez pas flotter le conteneur, l'image serait énorme (aussi large que la zone bleue), ce qui n'est pas non plus ce que vous souhaitez.

Pour être honnête, vous n'avez pas besoin que l'image soit réactive, car elle est suffisamment petite pour s'adapter à tous les écrans. Toutefois, si vous y tenez vraiment, vous pouvez supprimer la marge du conteneur et donner à l'image une largeur de 30 %, par exemple. Elle s'adaptera alors au navigateur.

Sachez toutefois que la mise à l'échelle s'arrêtera à 700px, parce que l'option de mise à l'échelle de l'image ne peut être utilisée. inner-header a une largeur minimale de 700px.

1voto

Ishpreet Points 169

Réponse simple : faites les largeurs en pourcentages, c'est-à-dire width:30% et ainsi de suite, height:auto et le padding et la marge 0.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X