代码之家 › 专栏 › 技术社区 › Lucky Lam

CSS3图像没有响应

responsive css

Lucky Lam · 技术社区 · 7 年前

我试图让我的图像有响应性,但它不起作用。有人能指出我的代码出了什么问题吗?

<article class="main-story">

    <img src="http://f.cl.ly/items/2e3c2a1Z0D1H3u0W2K12/shera.jpg" alt="Sha Ra Rocking"/>

    <div class="story-intro">
        <h1>Most Important Story</h1>
        <p>This article has the most visual weight. <a href="http://nebezial.deviantart.com/art/she-ra-115867096">image source.</a></p>
    </div>

</article>

CSS

.main-story {
    position: relative;
    width: 800px;
    margin: 0 0 25px 0;
}

.main-story > img {
  max-width: 100%;
  max-height: 100%;
}

jsfiddle

2 回复 | 直到 7 年前

SLL 7 年前

你的图像的容器(主故事)总是800px,因为这个空间是可用的(并且不比你的图像大),你的图像总是填充容器。

如果你不想x-overflow,那么你也应该让你的容器在某种程度上具有响应性,并且图像将继续填充100%的响应容器。

iamwtk 7 年前

jsFiddle

请注意换页中的更改,我将容器更改为最大宽度800px的响应;

.page-wrap {
        width: 100%;
        margin: 20px auto;
        max-width: 800px;
    }

img {
        display: block;
        max-width: 100%;
    }

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前