如何拥有相同的长方形？

Question

我有两个不同的长方形，我想要和'Máscara‘一样的大小。

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

​

​

这是我的密码

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>

​

Answer 1

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

通过这种方式，您可以指定div的高度，以便它们都是相同的，然后background-size: contain将尽可能地将背景图像放入其中(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');
}