Question

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

Answer 1

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

img {
  max-width:100%;
}

Answer 2

将width和height分配给您的img。现在，每当您更改figure height和width时，都会根据它进行更改。

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

Answer 3

试试这个

figure > img {
    width: 12px;
}

在CSS中更改图形的大小不会影响其内部的图像大小

3 个答案: