twitter-bootstrap 使用引导程序在 div 内拟合图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29169851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fitting image inside div with bootstrap
提问by S.I.
I have one strange problem ( at least for me ). When I upload image and save to database then I show it on the page. The images are big ~10mband high resolution.
我有一个奇怪的问题（至少对我而言）。当我上传图像并保存到数据库时，我会在页面上显示它。图像大~10mb且分辨率高。
When I manually re-size the image to 500x500 they are fitted in the div and all is good. But if I didn't re-size them and try to load into the div they break all the divs. What I mean is this:
当我手动将图像大小重新调整为 500x500 时，它们将安装在 div 中并且一切正常。但是如果我不重新调整它们的大小并尝试加载到 div 中，它们就会破坏所有的 div。我的意思是这样的：
- Image manually re-sized to 500x500
- Images not re-sized and loaded into gallery with their dimensions.
- 图片手动调整为 500x500
- 图像未重新调整大小并以其尺寸加载到图库中。
This is the HTML and CSS of that part of page
这是页面那部分的 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 -->
and the css
和 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);
}
If I try with height..it is cropping the image...
如果我尝试使用height..它裁剪图像...
EDIT:
编辑：
I've put heightand widthto 250px. Then min-width: 100%;and min-height: 100%;and this is the result. The image is not fitting.
我已经把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%;
}
回答by Marc van Nieuwenhuijzen
Option 1 (no Bootstrap)
选项 1（无引导程序）
HTML
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
CSS
.g-item{
width: 500px;
height: 500px;
background-position: center;
background-size: cover;
}
Option 2 (with Bootstrap)
选项 2（使用 Bootstrap）
Warning! This wil crop images in portrait orientation.
警告！这将以纵向裁剪图像。
HTML
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
CSS
.g-item{
width: 500px;
height: 500px;
}
