在同一页面上呈现的部分中的不同css属性

Question

看似简单的问题我似乎无法思考。我甚至不确定这是否可以通过RoR解决。

我有两个部分，我在同一页面上渲染：

<%= render 'large_image_feed' %>
<%= render 'small_image_feed' %>

这两个部分看起来像这样：

<% @feed.each do |f| %>
<style>
p img { width: 100%; <%# width: 50%; in small_image_feed %> }
</style>

<p>
<img src="example.jpg">
</p>
<% end %>

问题是，由于_small_image_feed在_large_image_feed下面呈现，因此页面上的每个图像都有50％的宽度，而不是宽度取决于它来自的部分。图像必须是默认的img类。

Answer 1

首先，我不建议使用嵌入式样式，因此值得花些时间将它们移到您的资产中。除此之外，解决方案只是将您的部分包装在容器中。

大部分

<% @feed.each do |f| %>
<style>
  .large p img { width: 100%; }
</style>
<div class="large">
  <p>
   <img src="example.jpg">
  </p>
</div>
<% end %>

小部分

<% @feed.each do |f| %>
<style>
  .small p img { width: 50%; }
</style>
<div class="small">
  <p>
   <img src="example.jpg">
  </p>
</div>
<% end %>