如何将图片尺寸调整为100像素宽度和100像素高度？

时间：2019-03-19 08:44:26

标签： css css3 flexbox

能否请您告诉我如何将图像尺寸调整为100px的重量和100px的高度？ 我已经指定了宽度和高度，但是没有用

问题是这一行

img {
    /* vertical-align: middle; */
   max-width: 100% !important;
}

我不想在不删除此行的情况下删除任何行以上的解决方案

https://jsbin.com/wadopazasi/edit?html,css,output 

.pdfBox {
  width: 38%;
  float: left;
}

.imgContainer {
  width: 100%;
  overflow-x: auto;
}

.imgContainer ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: scroll;
  width: 100%;
}

img {}

img {
  /* vertical-align: middle; */
  max-width: 100%!important;
}
<div class="fl pdfBox">
  <div class="loadingBox ng-hide" ng-show="isLoading">
    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
  </div>
  <!-- ngIf: imageArray && imageArray.length -->
  <div class="imgContainer ng-scope" ng-if="imageArray &amp;&amp; imageArray.length">
    <ul>
      <!-- ngRepeat: img in imageArray -->
      <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700">
        <div style="text-transform: capitalize;" class="ng-binding">rent agreement 1</div>
      </li>
      <!-- end ngRepeat: img in imageArray -->
      <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700">
        <div style="text-transform: capitalize;" class="ng-binding">rent agreement 2</div>
      </li>
      <!-- end ngRepeat: img in imageArray -->
      <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700">
        <div style="text-transform: capitalize;" class="ng-binding">rent agreement 3</div>
      </li>
      <!-- end ngRepeat: img in imageArray -->
      <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700">
        <div style="text-transform: capitalize;" class="ng-binding">rent agreement 4</div>
      </li>
      <!-- end ngRepeat: img in imageArray -->
      <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700">
        <div style="text-transform: capitalize;" class="ng-binding">rent agreement 5</div>
      </li>
      <!-- end ngRepeat: img in imageArray -->
      <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700">
        <div style="text-transform: capitalize;" class="ng-binding">rent agreement 6</div>
      </li>
      <!-- end ngRepeat: img in imageArray -->
      <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700">
        <div style="text-transform: capitalize;" class="ng-binding">rent agreement 7</div>
      </li>
      <!-- end ngRepeat: img in imageArray -->
      <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700">
        <div style="text-transform: capitalize;" class="ng-binding">rent agreement 8</div>
      </li>
      <!-- end ngRepeat: img in imageArray -->
    </ul>
  </div>
  <!-- end ngIf: imageArray && imageArray.length -->
</div>
<!-- end ngIf: user_lob.indexOf('TELEMEDIA') >= 0 || user_lob.indexOf('POSTPAID') >= 0 || interactionId!=null -->

</div>

1 个答案:

答案 0 :(得分：2)

您可以通过提供诸如

这样的更多特定性来选择.imgContainer ul中的所有图像 
.imgContainer ul li img{
  max-width: 100px
}

我也建议不要在CSS中使用!important，因为如果您一次使用!important，则需要更多!important来控制它。

.pdfBox {
  width: 38%;
  float: left;
}

.imgContainer {
  width: 100%;
  overflow-x: auto;
}

.imgContainer ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: scroll;
  width: 100%;
}

img {}

img {
  /* vertical-align: middle; */
  max-width: 100% !important;
}

.imgContainer ul li img {
  max-width: 100px !important;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="fl pdfBox">
    <div class="loadingBox ng-hide" ng-show="isLoading">
      <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
    </div>
    <!-- ngIf: imageArray && imageArray.length -->
    <div class="imgContainer ng-scope" ng-if="imageArray &amp;&amp; imageArray.length">
      <ul>
        <!-- ngRepeat: img in imageArray -->
        <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700">
          <div style="text-transform: capitalize;" class="ng-binding">rent agreement 1</div>
        </li>
        <!-- end ngRepeat: img in imageArray -->
        <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700">
          <div style="text-transform: capitalize;" class="ng-binding">rent agreement 2</div>
        </li>
        <!-- end ngRepeat: img in imageArray -->
        <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700">
          <div style="text-transform: capitalize;" class="ng-binding">rent agreement 3</div>
        </li>
        <!-- end ngRepeat: img in imageArray -->
        <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700">
          <div style="text-transform: capitalize;" class="ng-binding">rent agreement 4</div>
        </li>
        <!-- end ngRepeat: img in imageArray -->
        <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700">
          <div style="text-transform: capitalize;" class="ng-binding">rent agreement 5</div>
        </li>
        <!-- end ngRepeat: img in imageArray -->
        <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_front_image.jpeg?1552983684700">
          <div style="text-transform: capitalize;" class="ng-binding">rent agreement 6</div>
        </li>
        <!-- end ngRepeat: img in imageArray -->
        <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700">
          <div style="text-transform: capitalize;" class="ng-binding">rent agreement 7</div>
        </li>
        <!-- end ngRepeat: img in imageArray -->
        <li ng-class="{'active_border':$index == currentImageIndex}" ng-repeat="img in imageArray" class="ng-scope"><img data-ng-src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700" width="100" height="100" ng-click="onImageClick(img.imageBytes,$index)" src="https://evportal.airtel.com/sharedimages/prepaid/19-03-2019/22f6c5ab-5aaf-4033-8c90-09b67eb48cc81552975454836_poa_back_image.jpeg?1552983684700">
          <div style="text-transform: capitalize;" class="ng-binding">rent agreement 8</div>
        </li>
        <!-- end ngRepeat: img in imageArray -->
      </ul>
    </div>
    <!-- end ngIf: imageArray && imageArray.length -->
  </div>
  <!-- end ngIf: user_lob.indexOf('TELEMEDIA') >= 0 || user_lob.indexOf('POSTPAID') >= 0 || interactionId!=null -->

  </div>
</body>

</html>

相关问题
最新问题