Question

当没有指定固定的高度和宽度时，我无法显示图像。我希望我的图像能够灵活地响应我的网格，所以我认为可行的是将高度和宽度设置为100％，但无济于事。

如何显示图像并相应地更改尺寸？

HTML

    <div class="row">
    <div class="large-12 columns">
        <div class="hero">
            <img id="image" src="steve1.png" alt=""/>
        </div>
    </div>
</div>

CSS

  .hero {
max-width: 100%;
height: auto;
background-repeat: no-repeat;
margin: 0;

  }

Answer 1

试一试：

html {
    min-height: 100%;
    background-size: cover;
    background-image: url(steve1.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}
body{
    min-height:100%;
}

Answer 2

尝试添加到css：

.hero img {width:100%;}

您必须将样式添加到img it self，而不是容器div。

css响应背景图像没有显示

2 个答案: