Question

我有一个包含文字和图像的部分，每个部分用段落包装。

问题在于我想让文字段落更窄（例如450px）但保持图像不变（如果屏幕分辨率允许或全屏，则保留图像的完整图像宽度640px宽度）。

如果我能分辨哪个段落保存图像并且保存文本以便我可以设置样式，那将会很容易。然而，内容是动态的，没有课程告诉他们appart。

我做的第一件事是修复段落宽度（例如450px），但这也限制了图像。如果我从图像中删除max-width:100%，则图像大于文本（640px，文本保持在450），但它不再对较低分辨率做出响应。

你有什么建议吗？

Js fiddle link。基本示例（js小提琴包含带有base64代码的工作版本）

HTML：

<div class="wrapper">
    <section class="section-class">
        <p>Make this 450px wide for text only. Image needs to stay full width when resolution permits and scale to 100% with lower res<p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>
        <!-- How to style this pargraph dynamically / with a css selector ? -->

            <img src="data:image/png;base64,.../>
        </p>
    </section>
</div>

CSS：

.section-class {width:100%;}
.section-class img {max-width:100%;}/*keeps the image responsive on lower res*/
.section-class p {
    /* Text needs to be narrower than the image, say 450px. The image needs to stay full width or scalable with screen width for lower res.*/
    /* Tried to make text only: max-width:50%; or width:450px;*/
}
.wrapper {width:700px;}
@media (max-width: 767px) {.wrapper {width:100%;}}
@media (min-width: 1200px) {.wrapper {width:860px;}}

预期输出：类似于http://jsfiddle.net/qvkzLs3x/1/之类的内容，但图片应具有响应性/即具有较低分辨率的全屏宽度。

更新

我相信我想要实现的目标与Is there a CSS parent selector?相似据我所知，CSS目前还没有这样的功能。

也许CSS4将与has一起使用，类似于jQuery的has()。

Answer 1

试试这个：

.section-class p {
   width:90%;
   max-width:450px;
}

<强> fiddle

修改

要使图像响应（从某个断点开始），您可以添加媒体查询规则，如：

@media (max-width: 767px) { /* ... */ .section-class > p > img { width:100%; height:auto } }

根据动态内容动态调整部分中的响应段落

更新

1 个答案: