如何僅在圖像不是背景圖像時使用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;
}