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

Question

我正在尝试使这个布局响应。 我遇到的问题就像图像在前景上。 我尝试过背景位置封面，但没有成功。 我不应该为此使用任何JavaScript

以下是小提琴链接

http://jsfiddle.net/6jhx7du6/

HTML：

<div class="page-wrap">
     <h1>Make This Responsive</h1>

    <p>While maintaining the heirarchy of importance.</p>
    <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>
    <section class="sub-stories">
        <article class="sub-story">
            <img src="http://placekitten.com/250/350" />
            <div class="story-intro">
                 <h2>Less Important Story</h2>

                <p>This story has less visual weight.</p>
            </div>
        </article>
        <article class="sub-story">
            <img src="http://placecage.com/250/350" />
            <div class="story-intro">
                 <h2>Less Important Story</h2>

                <p>This story has less visual weight.</p>
            </div>
        </article>
        <article class="sub-story last">
            <img src="http://placebear.com/250/350" />
            <div class="story-intro">
                 <h2>Less Important Story</h2>

                <p>This story has less visual weight.</p>
            </div>
        </article>
    </section>
</div>

CSS：

* {
    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;
}
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-stories {
    overflow: hidden;
    margin: 0 0 25px 0;
}
.sub-story {
    float: left;
    width: 250px;
    margin-right: 25px;
    position: relative;
    font-size: 80%;
}
.last {
    margin-right: 0;
}

提前致谢..

Answer 1

现在定义你的类.main-story img

这种风格

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

Answer 2

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

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

img {
    width:100%;
}

Answer 3

你好你的意思是你想要的设计流畅，没有响应，一个解决方案是将宽度设置为百分比如下：

http://jsfiddle.net/6jhx7du6/1/

.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%;
}

Answer 4

为此，添加.sub-story { width: x%;}和.sub-story img { width: 100%;} 。 因此，图像将填充现在响应的.sub-story 。 您可以使用CSS中的@media查询将.sub-story的宽度调整为33.33％或50％或任何其他值。

Answer 5

嘿试试这个替换你的css代码。

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

JS Fiddle Link：

http://jsfiddle.net/abidkhanweb/r97d1w64/

* {
    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;
}