如何使图像适合特定的div (bootstrap)
如何使图像适合特定的div (bootstrap)
提问于 2018-01-23 20:43:47
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="card" style="height: 20em;width: 17em;">
<div style="height:17em;width:17em;background-color: #5f5f5f">
<img class="card-img-top" src="http://haulihuvila.com/wp-content/uploads/2012/09/hauli-huvila-campgrounds-lg.jpg">
</div>
<div class="card-body">
<h3 class="card-title">help me</h3>
<a href="#" class="btn btn-primary">More Info</a>
</div>
</div>
如何将图像大小调整为div的大小。我已经尝试给img一个类，它的max-width和max-height分别为100%和100%。
回答 4
Stack Overflow用户
发布于 2018-01-23 20:50:59
通过提供max-height和max-width，图像可以调整大小并添加您的css。查看是否有什么东西阻止了这些属性
.card-img-top{
max-width:100%;
max-height:100%;
}<div class="card" style="height: 20em;width: 17em;">
<div style="height:17em;width:17em;background-color: #5f5f5f">
<img class="card-img-top" src="http://haulihuvila.com/wp-content/uploads/2012/09/hauli-huvila-campgrounds-lg.jpg">
</div>
<div class="card-body">
<h3 class="card-title">help me</h3>
<a href="#" class="btn btn-primary">More Info</a>
</div>
</div
Stack Overflow用户
发布于 2018-01-23 20:51:21
如果希望将图像放入div中，请使用background-image而不是<img>
堆栈代码段
.bg {
background-image: url(http://haulihuvila.com/wp-content/uploads/2012/09/hauli-huvila-campgrounds-lg.jpg);
height: 17em;
width: 17em;
background-color: #5f5f5f;
background-size: cover;
background-position: center center;
}<div class="card" style="height: 20em;width: 17em;">
<div class="bg"></div>
<div class="card-body">
<h3 class="card-title">help me</h3>
<a href="#" class="btn btn-primary">More Info</a>
</div>
</div>
Stack Overflow用户
发布于 2018-01-23 20:52:04
使用Css3 background，它可以让你更好地控制div中的图像。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.class1{
background-size: 100% 100%;
background-image: url(http://haulihuvila.com/wp-content/uploads/2012/09/hauli-huvila-campgrounds-lg.jpg);
}
</style>
</head>
<body>
<div class="card" style="height: 20em;width: 17em;">
<div class="class1" style="height:17em;width:17em;background-color: #5f5f5f">
</div>
<div class="card-body">
<h3 class="card-title">help me</h3>
<a href="#" class="btn btn-primary">More Info</a>
</div>
</div
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48402082
复制相关文章
相似问题
腾讯云开发者
