【发布时间】：2020-09-10 01:26:48
【问题描述】：
我对 CSS/Bootstrap 还很陌生，可以寻求专业人士的帮助。 我的问题是我无法获得适合 div 确切尺寸的图像，如果我设置实际的 IMG 标签高度和宽度，它会全部失真，基本上我想要一个漂亮的缩略图。目标是让用户上传，因此图像将是所有不同尺寸的横向/纵向。如果您看到我附加的图像，我喜欢我的 Windows 邮件如何裁剪图像以适合“div”并放大中心或其他东西。见图片。 https://publicadamwebgis.s3.us-east-2.amazonaws.com/Capture2.JPG 这也适用于大约 375 像素的移动视图。 请参阅 jsfiddlle 代码。这里的 JSFiddle 并不能很好地工作。链接效果更好。
https://jsfiddle.net/dfmrjqs1/
.RestrauantMainLi{
border: 1px solid rgb(155, 155, 155);
border-radius: 5px;
margin-bottom: 25px;
height: 140px;
transition: all 200ms ease-out;
}
.RestrauantLiIcons{
display: flex;
justify-content: space-between;
}
.progress {
display: -ms-flexbox;
display: flex;
height: 0.5rem;
overflow: hidden;
font-size: .75rem;
background-color: white;
border-radius: .25rem;
margin-top: 6px;
width:inherit;
padding-left: 2px;
padding-right: 2px;
}
.progressbar1 {
color:hotpink;
border-radius: 5px;
}
.percentbox{
float:left;
height: 25px;
width: 18%;
background-color:#a9b1b1;
padding-left: 0px;
padding-right: 0px;
padding-top: 2px;
font-size: 10pt;
text-align: center;
color: white;
border-radius: 5px;
}
.statusbox{
height: 25px;
padding-left: 0px;
padding-right: 0px;
border-radius: 5px;
width: auto;
padding-top: 3px;
}
.RestrauantMainListyle2{
height: inherit;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.RestrauantMainThumbnailContainer{
height:inherit;
width:160px;
}
.RestrauantMainThumbnail{
max-height: 100%;
max-width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/3590d6dbc0.js"></script>
<body>
<div class = 'container RestrauantMainLi'>
<div class ='row' style = 'height: inherit;'>
<div class = 'col-7 RestrauantMainListyle2'>
<div class='row'>
<div class = 'col-10'>
Jets Pizza
</div>
<div class = 'col-2'>
<i class='fas fa-info-circle'></i>
</div>
</div>
<div class='row'>
<div class = 'col-6'>Chines</div>
<div class = 'col-6'>$$</div>
</div>
<div class= 'RestrauantLiIcons'>
<i class='far fa-thumbs-up'>34</i>
<i class='far fa-thumbs-down'>23</i>
<i class='far fa-comments'>23</i>
<i class='fas fa-route'></i>
</div>
<div>
<div class='container percentbox'>5</div>
<div class='container statusbox'>
<div class='container progress'>
<div class='progress-bar bg-success progressbar1' style='width:80%'></div>
<div class='progress-bar bg-danger progressbar1' style='width:50%'></div>
</div>
</div>
</div>
<div class ='row' style = 'justify-content: center' >
<i class="fas fa-chevron-down"></i>
</div>
</div>
<div class = 'col-5 RestrauantMainThumbnailContainer'>
<img src = 'https://publicadamwebgis.s3.us-east-2.amazonaws.com/IMG_9249.jpg'class="img-thumbnail RestrauantMainThumbnail">
</div>
</div>
</div>
</body>
</html>我什至不知道我的 CSS 代码或 html 是否正确完成。任何有助于改进我的代码或解决任何问题的帮助，将不胜感激。 谢谢！
【问题讨论】：
标签： css image bootstrap-4