Question

在我的Rails应用程序中，我有弹出有时包含照片的模态。这些照片的默认尺寸为600 x 600.我需要做的是在视口高度减小时减小模态（div）和图像的高度，使模态延伸到页面的折叠之外。

这是HTML：

<div id="photo_preview">
    <div id="inner-preview-container">
        <span class="glyphicon glyphicon-remove" id="remove"></span>
        <%= image_tag Product.find(@product.id).photo.url(:large).sub('http://s3.amazonaws.com/anymarket/','http://anymarket.s3.amazonaws.com/') %>
        <div id="info-preview-container">
            <h4><a href="/products/<%= @product.id %>"><%= @product.name %></a></h4>
            <p>By <%= User.find(@product.user_id).first_name %> <%= User.find(@product.user_id).last_name %></p>
        </div>
    </div>
</div>

CSS：

#photo_preview {
  @extend #send_question_wrapper;
  z-index:1000;
  width:600px;
  background-color:white;
  border:1px solid #bbb;
  border-radius:3px;
  padding:5px;
  top:50px !important;
  img{
    max-width:100%;
    height:auto;
  }
  #remove {
    float:right;
    color:#bbb;
    margin-bottom:5px;
    cursor:pointer;
  }
}

我需要做什么才能完成我想做的事情？我已经尝试将img高度设置为自动，但它没有工作。

Answer 1

假设你的模态ID是photo_preview（它不清楚），只需这样做：

#photo_preview, #photo_preview img{width: 100%; max-width:600px;}

与

相同

#photo_preview, #photo_preview img{height: 100%; max-height:600px;}

因为你的图像都是相同的方形尺寸。您可以使用其中任何一种，但宽度IN GENERAL在响应大小方面表现更好

当视口高度减小时，降低div内图像的高度？

1 个答案: