Html 如何仅在图像不是背景图像时使用CSS使图像响应？

我正在努力使这个布局具有响应性。我遇到的问题是，图像位于前景。我试过背景位置封面，但没有成功。我不应该为此使用任何javascript

下面是小提琴链接

HTML:

---

提前感谢。

现在定义你的类

。主要故事
img

这种风格

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

您需要在图像容器中设置最大宽度，然后将图像宽度设置为100%。像这样

.sub-story {
    float: left;
    max-width: 250px;
    margin-right: 25px;
    position: relative;
    font-size: 80%;
}

img {
    width:100%;
}

您好您的意思是您想要的是设计流体，而不是响应性，
一种解决方案是将宽度设置为百分比，如下所示：


为此，添加
.sub-story{width:x%；}
和
.sub-story img{width:100%；}
。
因此，图像将填充
.sub-story
，该子故事现在已响应。
您可以使用CSS中的@media query将
.sub-story
的宽度调整为33.33%或50%或任何其他值。
请尝试将此CSS替换为您的CSS代码

调整大小后，您需要根据媒体查询更改宽度和字体大小

JS Fiddle链接：


为什么不使用宽度：100%。然后你的图像会有响应。或者有其他问题吗？我试过在图像标签上使用它，但没有真正起作用。图片没有调整大小。bt对我来说它正常工作…即使在你的例子中，我只是添加了宽度：100%，它从1900px工作到320px。问题是我的IDE。现在开始工作了。谢谢狮子狮子座，谢谢大家的回答，Rohit Azad、Winresh24和Anuj Gargp请再次阅读问题。op希望主标题图像响应，而不是另一个。谢谢您的尝试。
.main-story > img{
width:100%;
}

.sub-story {
    float: left;
    max-width: 250px;
    margin-right: 25px;
    position: relative;
    font-size: 80%;
}

img {
    width:100%;
}

.sub-stories {
    overflow: hidden;
    margin: 0 0 25px 0;
    max-width:800px;
}
.sub-story {
    float: left;
    width: 31%;
    margin-right: 3.5%;
    position: relative;
    font-size: 80%;
}

* {
    box-sizing: border-box;
}
.page-wrap {
    width: auto;
    margin: 20px auto;
}
.main-story {
    position: relative;
    margin: 0 0 25px 0;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
    width:100%;
}
a {
    color: lightblue;
}
.story-intro {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    padding: 20px;
    color: white;
}
h1 {
    font-size: 4em;
}
h1, h2 {
    margin: 0 0 10px 0;
}
.story-intro h1 {
    font-size: 2.5em;
}
.story-intro p {
    margin: 0;
}
.sub-story img{
    width:100%;
    height:auto;
}
}
.sub-stories {
    overflow: hidden;
    margin: 0 0 25px 0;
}
.sub-story {
    float: left;
    width: 32%;
    margin-right: 2%;
    position: relative;
    font-size: 80%;
}
.last {
    margin-right: 0;
}