改变CSS的图形的大小并不影响它

内的图像大小。当我在缩小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属性，它不会影响该网站上显示的图像的大小。

来源

2016-08-02 Jake

试试这个

figure > img { 
    width: 12px; 
}

来源

2016-08-02 03:46:12 idzignr

谢谢，这完美！ – Jake

尝试在图像上应用最大宽度。

img { 
    max-width:100%; 
}

来源

2016-08-02 03:34:08 partypete25

分配width和height您img。现在，只要你改变你figureheight和width这要根据它而改变。

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

来源

2016-08-02 03:40:34 frnt

改变CSS的图形的大小并不影响它

回答

相关问题