Question

我试图创建一个简单的网站，但我下载了一些图片，但我希望它们具有相同的尺寸/布局。

<div>

@*Linha 1*@
<div class="row">
    <div class="col-md-4 portfolio-item">
        <a href="#">
            <img class="portrait" id="bf1" src="~/Content/Images/battlefield1.png" alt="" onmouseover="ChangeImageMouseOver();" onmouseout="ChangeImageMouseOut();">
        </a>
        <h3>
            Gaming
        </h3>
        <p>Upon yielding, kind sea subdue very seed sixth them lesser one lesser there earth days were multiply so sixth gathering fifth that man fowl made.</p>
    </div>

    <div class="col-md-4 portfolio-item">
        <a href="#">
            <img class="portrait" src="~/Content/Images/assetto corsa.jpg" alt="">
        </a>
        <h3>
            Gaming
        </h3>
        <p>Upon yielding, kind sea subdue very seed sixth them lesser one lesser there earth days were multiply so sixth gathering fifth that man fowl made.</p>
    </div>

    <div class="col-md-4 portfolio-item">
        <a href="@Url.Action("CSGO","PC")">
            <img class="portrait" src="~/Content/Images/csgo.jpeg" alt="" >
        </a>
        <h3>
            Gaming
        </h3>
        <p>Upon yielding, kind sea subdue very seed sixth them lesser one lesser there earth days were multiply so sixth gathering fifth that man fowl made.</p>
    </div>
</div>

@*Linha 2*@
<div class="row">
    <div class="col-md-4 portfolio-item">
        <a href="#">
            <img class="portrait" src="~/Content/Images/dota2.jpg" alt="">
        </a>
        <h3>
            Gaming
        </h3>
        <p>Upon yielding, kind sea subdue very seed sixth them lesser one lesser there earth days were multiply so sixth gathering fifth that man fowl made.</p>
    </div>

    <div class="col-md-4 portfolio-item">
        <a href="#">
            <img class="portrait" src="~/Content/Images/fifa17.jpg" alt="">
        </a>
        <h3>
            Gaming
        </h3>
        <p>Upon yielding, kind sea subdue very seed sixth them lesser one lesser there earth days were multiply so sixth gathering fifth that man fowl made.</p>
    </div>

    <div class="col-md-4 portfolio-item">
        <a href="#">
            <img class="portrait" src="~/Content/Images/LoL.png" alt="">
        </a>
        <h3>
            Gaming
        </h3>
        <p>Upon yielding, kind sea subdue very seed sixth them lesser one lesser there earth days were multiply so sixth gathering fifth that man fowl made.</p>
    </div>
</div>

Answer 1

我已经替换了我自己的图像用于显示目的，但这里的css很重要（你可以将它作为一个单独的css样式表链接 - 推荐 - 或者将样式放在<style>标签的头部html文件）

在我的CSS中，我为图像设置了最大高度，但如果你的图像高度不同，那么将高度设置为自动可能会更好。（无论如何，我的图像大约是120，有些略高于~125）

#wrapper {
  overflow-y: visible;
  overflow-x: hidden;
  width: 100%;
  height: auto;
}

.row div {
  display: inline-block;
  position: relative;
  max-width: 30%;
  padding: 5px;
  margin: 5px;
}

a img {
  width: 95%;
  max-height: 120px;
}

<div id="wrapper">

  <div class="row">
    <div class="col-md-4 portfolio-item">
      <a href="#">
        <!--  <img class="portrait" id="bf1" src="~/Content/Images/battlefield1.png" alt="battlefield" onmouseover="ChangeImageMouseOver();" onmouseout="ChangeImageMouseOut();">-->
        <img class="portrait" id="bf1" src="http://www.rachelgallen.com/images/autumntrees.jpg" alt="Trees" />
      </a>
      <h3>
        Gaming
      </h3>
      <p>Upon yielding, kind sea subdue very seed sixth them lesser one lesser there earth days were multiply so sixth gathering fifth that man fowl made.</p>
    </div>

    <div class="col-md-4 portfolio-item">
      <!--  <a href="#">
            <img class="portrait" src="~/Content/Images/assetto corsa.jpg" alt="CORSA">    </a>-->
      <a> <img class="portrait" id="bf1" src="http://www.rachelgallen.com/images/babytiger.jpg" alt="tiger" /></a>
      <h3>
        Gaming
      </h3>
      <p>Upon yielding, kind sea subdue very seed sixth them lesser one lesser there earth days were multiply so sixth gathering fifth that man fowl made.</p>
    </div>

    <div class="col-md-4 portfolio-item">
      <!--    <a href="@Url.Action('CSGO','PC')">
            <img class="portrait" src="~/Content/Images/csgo.jpeg" alt="CSGO" >
        </a>--->
      <a> <img class="portrait" id="bf1" src="http://www.rachelgallen.com/images/daffodils1.jpg" alt="Daffodils" /></a>
      <h3>
        Gaming
      </h3>
      <p>Upon yielding, kind sea subdue very seed sixth them lesser one lesser there earth days were multiply so sixth gathering fifth that man fowl made.</p>
    </div>
  </div>

我在你的包含div上添加了一个id - 有助于区分，特别是当你有div的层次结构时

祝你好运

使图像大小相同

1 个答案: