使用bootstrap在div内部拟合图像

Question

我有一个奇怪的问题（至少对我而言）。当我上传图像并保存到数据库时，我会在页面上显示它。图像很大~10mb，分辨率很高。

当我手动将图像重新调整为500x500时，它们就安装在div中，一切都很好。但如果我没有重新调整它们的大小并尝试加载到div中，它们就会破坏所有的div。我的意思是：

1. 手动将图像重新调整为500x500
2. 图片未按尺寸重新调整大小并加载到图库中。

这是该部分页面的HTML和CSS

<div class="row">
   <div class="col-md-4 col-ms-6">
      <div class="g-item">
         <img src="" alt="">
            <a data-rel="lightbox" class="overlay" href="">
                <span>+</span>
            </a>
      </div> <!-- /.g-item -->
   </div> <!-- /.col-md-4 -->
</div> <!-- /.row -->

和css

.g-item {
    margin-bottom: 30px;
    padding: 6px;
    position: relative;
    background-color: white;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    /* Chrome, Safari, Opera */
    backface-visibility: hidden;
 }

.g-item img {
    overflow: hidden;
    width: 100%;
}

.g-item .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #d8aa46;
    text-align: center;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

如果我尝试使用height..，则会裁剪图像...

编辑：

我已将height和width置于250px。然后是min-width: 100%;和min-height: 100%;，这就是结果。图像不适合。

.g-item {
margin-bottom: 30px;
padding: 6px;
position: relative;
background-color: white;
overflow: hidden;
-webkit-backface-visibility: hidden;
/* Chrome, Safari, Opera */
backface-visibility: hidden;
width: 250px;
height: 250px;    
}

.g-item img {
overflow: hidden;
min-width: 100%;
min-height: 100%;
}

Answer 1

选项1（无引导程序）

---

HTML

<div class="row">
   <div class="col-md-4 col-ms-6">
      <div class="g-item" style="background-image:url('your-image-url');">

            <a data-rel="lightbox" class="overlay" href="">
                <span>+</span>
            </a>
      </div> <!-- /.g-item -->
   </div> <!-- /.col-md-4 -->
</div> <!-- /.row -->

CSS

.g-item{
    width: 500px;
    height: 500px;
    background-position: center;
    background-size: cover;
}

选项2（使用Bootstrap）

警告！这将拍摄纵向的图像。

---

HTML

<div class="row">
   <div class="col-md-4 col-ms-6">
      <div class="g-item"">
            <img clas="img-responsive" src="" alt="">
            <a data-rel="lightbox" class="overlay" href="">
                <span>+</span>
            </a>
      </div> <!-- /.g-item -->
   </div> <!-- /.col-md-4 -->
</div> <!-- /.row -->

CSS

.g-item{
    width: 500px;
    height: 500px;
}