如何拥有相同的矩形？答案

【问题标题】：How to have the same rectangle?如何拥有相同的矩形？
【发布时间】：2018-08-04 14:31:18
【问题描述】：

我有 2 个不同的矩形，我想要像“睫毛膏”一样的大小。

我知道图像有不同的大小。出于这个原因，我想要相同的矩形独立于图像大小。

这是我的代码

css

.bann-bottom p {
font-size: 1.4em;
color:#fff;
margin: 0.3em 0em 0em 0em;
}
.bann-bottom {
 padding: 18em 0em 0em 0em;
 }

.bann-head {
float: left;
width: 19.5%;
padding: 2em 0em 2em 0em;
margin: 0% 0.5% 0% 0%;
background:#FFFFFF; 
}

html

<div class="banner">
<div class="container">
    <div class="banner-main">
      <h1>La mejor tienda de Snorkel de Mallorca</h1>
      <div class="bann-bottom">
        <div class="bann-head">
            <a href="http://www.marca.com"><img src="images/mascara.jpg" alt="" class="img-responsive" height="500" width="300"></a>
                <h3><a  href="http://www.marca.com"> <button type="button" class="btn btn-info">Máscaras</button> </a></h3>
        </div>
        <div class="bann-head">
                <a href="http://www.marca.com"><img src="images/tubo.jpg" alt="" class="img-responsive" height="500" width="1000"></a>
                <h3><a  href="http://www.marca.com"> <button type="button" class="btn btn-info">Tubos</button> </a></h3>
        </div>
        <div class="clearfix"> </div>
      </div>
    </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap image size

【解决方案1】：

bannhead 占用其中包含的元素的宽度。

因此，您已经知道它正在获取图像本身的宽度和高度。

如果您希望它们具有相同的height，则给bannhead 一个固定的高度，例如：

.bann-head {
 float: left;
 height: 300px;
 width: 19.5%;
 padding: 2em 0em 2em 0em;
 margin: 0% 0.5% 0% 0%;
 background:#FFFFFF; 
}

和object-fit

bannhead img{
  height: 200px;/*change this accordingly*/
  object-fit: cover;/* fill; contain;*/
}

图像会相应调整。

【讨论】：

谢谢！随着高度，矩形已经完美放置。对于图像的大小，我使用样式并且我做得很好:)

【解决方案2】：

一种方法是在 div 上使用 background-image 并设置 background-size: contain。

这样您就可以指定 div 的高度，以便它们都相同，然后background-size: contain 将尽其所能适应背景图像 (https://www.w3schools.com/cssref/css3_pr_background-size.asp)

这是您的代码，稍作修改以显示此内容。您可能需要进行更多更改（例如，您可能不得不弄乱<a> 标签以使它们按照您的意愿行事）

HTML

<div class="banner">
  <div class="container">
    <div class="banner-main">
      <h1>La mejor tienda de Snorkel de Mallorca</h1>
      <div class="bann-bottom">
        <a href="http://www.marca.com">
          <div class="bann-head" id="mascara">
            <h3>
              <button type="button" class="btn btn-info">Máscaras</button>
            </h3>
          </div>
          <div class="bann-head" id="tubo">
            <h3>
              <button type="button" class="btn btn-info">Tubos</button>
            </h3>
          </div>
        </a>
        <div class="clearfix"> </div>
      </div>
    </div>
  </div>

CSS

.bann-bottom p {
  font-size: 1.4em;
  color:#fff;
  margin: 0.3em 0em 0em 0em;
}

.bann-bottom {
   padding: 18em 0em 0em 0em;
 }

.bann-head {
  float: left;
  width: 19.5%;
  padding: 2em 0em 2em 0em;
  margin: 0% 0.5% 0% 0%;
  background:#FFFFFF;
  height: 13%; /* You can change this to whatever looks best */
  background-size: contain;
}

#mascara{
  background-image: url('images/mascara.jpg');
}

#tubo{
  background-image: url('images/tubo.jpg');
}

【讨论】：