2016-08-02 41 views
0

內的圖像大小。當我在縮小CSS的圖形的大小,它裏面的圖像仍保持原始大小改變CSS的圖形的大小並不影響它

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; 
} 

當我修改的CSS width屬性,它不會影響該網站上顯示的圖像的大小。

回答

0

試試這個

figure > img { 
    width: 12px; 
} 
+0

謝謝,這完美! – Jake

1

嘗試在圖像上應用最大寬度。

img { 
    max-width:100%; 
} 
0

分配widthheightimg。現在,只要你改變你figureheightwidth這要根據它而改變。

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