时间戳

首页 > 解决方案 > CSS/Bootstrap/HTML 问题大小图像和代码改进？

css - CSS/Bootstrap/HTML 问题大小图像和代码改进？

问题描述

我对 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 是否正确完成。任何有助于改进我的代码或解决任何问题的帮助，将不胜感激。谢谢！

标签： cssimagebootstrap-4

解决方案

我希望这是你的愿望输出。我修改img.RestrauantMainThumbnailCSS。我添加img的是指定更高的 CSS 选择器特异性来覆盖img-thumbnail来自 bootstrap-4 的类的height属性。

img.RestrauantMainThumbnail {
  /* change from max-width to width */
  width: 100%;
  /* change from max-height to height */
  height: 100%;
  /* Add object-fit to specify how the contents of a replaced element should be fitted to the box */
  object-fit: fill; /* values: contain / cover / ... */
}


.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;
}

img.RestrauantMainThumbnail {
  /* change from max-width to width */
  width: 100%;
  /* change from max-height to height */
  height: 100%;
  /* Add object-fit to specify how the contents of a replaced element should be fitted to the box */
  object-fit: fill; /* values: contain / cover / ... */
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/3590d6dbc0.js"></script>

<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' style="border: thin solid orange">
      <img src='https://publicadamwebgis.s3.us-east-2.amazonaws.com/IMG_9249.jpg' class="img-thumbnail RestrauantMainThumbnail">
    </div>
  </div>
</div>

推荐阅读