Html 根据段落内容动态设置段落的样式

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

问题是，我想使文本段落更窄（例如

450px

），但保持图像的原样（如果屏幕分辨率允许，全屏宽度例如

640px

）

如果我能分辨出哪一段包含图像，哪一段包含文本，那么我就可以很容易地为它设置样式。然而，内容是动态的，没有类告诉他们

我做的第一件事是修正段落宽度（例如，为

450px

），但这也限制了图像。如果我从图像中删除

max width:100%

，则图像比文本大（640px，文本保持在450），但它不再响应较低的分辨率

你有什么建议吗

---

.基本示例（js fiddle包含base64代码的工作版本）

HTML:

预期输出：类似于此，但图像应具有响应性/即具有较低分辨率的全屏宽度

---

更新 我相信我正在努力实现的目标与 据我所知，CSS在这一点上没有这样的功能

CSS4可能会与

has

一起使用，类似于jQuery的

has（）

尝试以下方法：

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

---

编辑

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

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

---

您期望的输出是什么？所以您希望使para小而宽？为什么在

之前有一个起始

标记？这就是为什么在段落中添加

max width

会影响图像的原因。@Razvan我也注意到了这一点，但我会问，因为op有良好的回购协议，所以这可能是问题的主要原因。@Leothelion是的，同时保持其响应性。img的100%是相对于Wrapper的，但现在图像在较低分辨率下不再响应。它需要滚动。自己试试，缩小结果框。它可能更容易错过，因为图像都是蓝色的。我会接受你的答案，因为这是CSS能让我接近我想要的。如果我想为保存图像的图像或段落设置不同的最大宽度，我必须使用javascript。类似jQuery的东西已经出现了。希望它将在CSS4中实现。您可以使用媒体查询使img响应。根据媒体查询，我可能会在图像上使用最大宽度，这可能会让人感觉很不舒服。

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

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