图片会自动调整大小

时间:2018-09-10 20:56:39

标签: html css twitter-bootstrap image

当我放入第三张图片时,它的显示时间要比其他图片短。当我将图像名称替换为“ Serendipity”图像时,它不会显得更短。所有图像均为1200X800

<!--Start design section-->
<a id="design">
<div class="container-fluid designContainer text-center">
  <img class="img-fluid sectionIMG" src="images/design.png" alt="design">
  <div class="container-fluid text-center">
    <div class="row justify-content-md-center">
      <div class="col-lg-4 col-md-6 col-sm-12 project">
        <div class="hovereffect">
          <img class="img-fluid projectIcon" src="images/logo_serendipity.png" alt="serendipity">
          <div class="overlay">
            <h2>Serendipity Coffee & Tea</h2>
            <p>A small, family owned, cafe in the heart of Osage County.</p>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-12 project">
        <div class="hovereffect">
          <img class="img-fluid projectIcon" src="images/logo_audrey.jpg" alt="Audrey Collins">
          <div class="overlay">
            <h2>Audrey Collins</h2>
            <p>A rising pop artist located in Seattle, WA</p>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-12 project">
        <div class="hovereffect">
          <img class="img-fluid projectIcon" src="images/p2p.jpg" alt="P2P">
          <div class="overlay">
            <h2>Point to Point Transportation</h2>
            <p>A rising pop artist located in Seattle, WA</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--End design Section-->

JsFiddle Example

请注意,即使除图片链接之外,其他所有内容完全相同,最右边的图片也会显得较短。

enter image description here

0 个答案:

没有答案