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>

Answer 2

您可以使用CSS max-width属性。这将限制图像的宽度。如果将限制设置为小于或等于最小图像的真实宽度，则它们将全部缩小以匹配该值。请注意，您可能还需要在某些浏览器中处理垂直缩放，但在其他浏览器中会自动处理。

Answer 3

使用高度和宽度属性：

<img class="img-responsive img-portfolio img-hover" 
 src="../../imgVideos/test/1/pictureGallery3.jpg" width="200px" height="200px" 
 alt="">

HTML默认图片大小

3 个答案: