Ändern der Größe einer Figur in CSS nicht die Bildgröße in der es

nicht beeinträchtigt, wenn ich die Größe einer Figur in CSS schrumpfen, wird das Bild in der es bleibt die ursprüngliche GrößeÄndern der Größe einer Figur in CSS nicht die Bildgröße in der es

HTML:

<!DOCTYPE html> 
<html> 
    <link href="style.css" rel="stylesheet"> 

<head> 

</head> 

<body> 
    <div id="wrapper" style="text-align: center"> 
     <p>   
      Piece of text inside a 500px width div centered on the page 
     </p> 

     <figure> 
      <img src="https://www.newton.ac.uk/files/covers/968361.jpg"> 
     </figure> 
    </div><!--wrapper--> 
</body> 
</html>

CSS:

#wrapper { 
    width: 900px; 
    margin: 0 auto; 
} 

figure { 
    float: left; 
    display: inline-block; 
    width: 12px; 
    height: auto; 
} 

p { 
    clear: both; 
}

Wenn ich die Breite Attribut in der CSS ändern, ist es nicht die Größe des auf der Website gezeigten Bildes beeinflussen.

Quelle

2016-08-02 Jake

testen

figure > img { 
    width: 12px; 
}

Quelle

2016-08-02 03:46:12 idzignr

Danke, arbeitete dieses perfekt! – Jake

Versuchen Sie, eine maximale Breite auf das Bild anzuwenden.

img { 
    max-width:100%; 
}

Quelle

2016-08-02 03:34:08 partypete25

zuordnen width und height zu Ihrem img. Jetzt, wenn Sie Sie ändern figureheight und width dies zu Änderungen entsprechend.

figure > img{ 
    width:100%; 
    min-height:100%; 
}

Quelle

2016-08-02 03:40:34 frnt

Ändern der Größe einer Figur in CSS nicht die Bildgröße in der es

Antwort

Verwandte Themen