HTML 默认图像大小

Question

我在我的代码上显示 3 张图片。图片具有不同的尺寸(宽度和高度)。

<div class="row">
        <div class="col-lg-12">
            <h2 class="page-header">Gallery</h2>
        </div>
        <div class="col-md-4 col-sm-6">
            <a >
                <img class="img-responsive img-portfolio img-hover" src="../../imgVideos/test/1/pictureGallery1.jpg" alt="">
            </a>
        </div>
        <div class="col-md-4 col-sm-6">
            <a >
                <img class="img-responsive img-portfolio img-hover" src="../../imgVideos/test/1/pictureGallery2.jpg" alt="">
            </a>
        </div>
        <div class="col-md-4 col-sm-6">
            <a >
                <img class="img-responsive img-portfolio img-hover" src="../../imgVideos/test/1/pictureGallery3.jpg" alt="">
            </a>
        </div>
    </div>

加载并显示图片，但图片大小不同。如何将高度和宽度设置为默认值？

谢谢

Answer 1

在图像标签上使用height和width属性:

<div class="row">
  <div class="col-lg-12">
    <h2 class="page-header">Gallery</h2>
  </div>
  <div class="col-md-4 col-sm-6">
    <a>
      <img height="100" width="100" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt="">
    </a>
  </div>
  <div class="col-md-4 col-sm-6">
    <a>
      <img height="100" width="100" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt="">
    </a>
  </div>
  <div class="col-md-4 col-sm-6">
    <a>
      <img height="100" width="100" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt="">
    </a>
  </div>
</div>

或者通过设置 width 和 height 规则来使用一些 CSS，并将其链接到您想要影响的图像:

#myImage {

  width: 100px;
  height: 100px;

}

<div class="row">
  <div class="col-lg-12">
    <h2 class="page-header">Gallery</h2>
  </div>
  <div class="col-md-4 col-sm-6">
    <a>
      <img id="myImage" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt="">
    </a>
  </div>
  <div class="col-md-4 col-sm-6">
    <a>
      <img id="myImage" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt="">
    </a>
  </div>
  <div class="col-md-4 col-sm-6">
    <a>
      <img id="myImage" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt="">
    </a>
  </div>
</div>

---

另一件事:在上面的代码中，如果您使用的图像不是正方形，您可能需要使用 width: auto 或 height: auto。请看下面:

/* sets the width to 100px and the height will be calculate automatically to respect the dimensions */
#myImage1 {

  width: 100px;
  height: auto;

}


/* sets the height to 100px and the width will be calculate automatically to respect the dimensions */
#myImage2 {

  width: auto;
  height: 100px;

}

<div class="row">
  <div class="col-lg-12">
    <h2 class="page-header">Gallery</h2>
  </div>
  <div class="col-md-4 col-sm-6">
    <a>
      <img id="myImage1" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt="">
    </a>
  </div>
  <div class="col-md-4 col-sm-6">
    <a>
      <img id="myImage2" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt="">
    </a>
  </div>
</div>