Question

我正在使用类似Instagram的项目，用户可以在其中提交帖子，每个帖子都有相应的照片。

我现在的目标是创建一个包含标题（包含一些信息）和照片的div。（

所以我的html.erb是这样的：

<div class="post-content">
  <div class="header">
   <!-- some other code here -->
  </div>
  <div class="photo-container">
    <%= image_tag(post.image_url, class:'img-responsive') %>
  </div>
</div>

棘手的是： 1.无论用户上传的图像大小如何，我都想制作特定“固定”尺寸的“后期内容”div。 2.图像覆盖整个“后内容”div而不会消除任何溢出。 3.为了使图像响应 - 我正在使用Bootstrap。

到目前为止，我的相关scss代码如下：

.post-content-panel {
  width: 60%; 
  margin: 0 auto;
  padding: 0;
  // height: 300px; I'd like to fix this.
}  

.photo-container img {
    max-width: 100%;
    height: auto;
}

这部分有效。图像是响应的，覆盖整个div但不幸的是，父div的高度根据图像高度扩展或缩回。

我试过： 1.修复后内容面板高度，但这样做 2.使用transform：scale（0.5）转换图像，但是虽然尺寸减小，但图像不会覆盖整个容器div。 3.在Carrierwave中上传时标准化图像大小（宝石我在后端使用）。我使用resize_to_fill和resize_to_fit没有成功（图像被剪切或变形。

我怎样才能做到这一点。这是一个Carrierwave问题所以我在调整大小时不会剪切图像，或者你可以在这里看到任何css解决方案而不管图像的大小。感谢

使图像覆盖固定高度的整个div - Rails Carrierwave CSS

0 个答案: