Question

所以我提出了一个有趣的问题。最近我们在我们网站的移动版本上放了一些广告。该网站加载故事，有时在故事中有渲染的图像。在移动网站上，我们应用了以下css：

@media screen and (orientation:portrait) {
    img {
        width: 200px;
        height: 300px;
    }
}

这很有效，可以让我们的故事图像显示出来。但是，一旦我们添加了广告源，它们也会渲染图像，然后这些图像会以与其他图像相同的大小比例显示（例如：200 x 300）

我需要找到一种方法将媒体屏幕css仅应用于文章图像而不是所有在页面上呈现的图像。这是我们的故事代码块：

            <div id="blogSingle" class="wrappedContent">
                <!-- Blog Meta -->


                <p class="listMeta">
                            <span class="listMetaDate"><span class="webFont">P</span> 04/24/2015 5:00:00</span>
                            <span class="listMetaAuthor">Newspaper Staff</span>
                </p>

                <h2>Story headline</h2>

                <figure class="articleimg">
                        <a href="article_1776425142222_1.jpg"><img style="float: right; position: relative; margin: 10px 0px 15px 10px;" src="article_1776425142222_1.jpg" alt="Image"></a>
                </figure>
                <p>content goes here</p>

            </div>

我提前道歉，因为CSS不是我的强项。有人可以提供一些关于如何为文章图像应用正确的CSS的建议吗？

提前谢谢。

Answer 1

@media screen and (orientation:portrait) {
    .articleimg img {
        width: 200px;
        height: 300px;
    }
}

移动css故事图片和广告图片

1 个答案: