CODEWITHSUNDEEP
cssflexbox
user944513
user944513

Reputation: 12729

How to size image to 100px widht and 100px height?

Could you please tell me How to size image to 100px weight and 100px height ? I already given width and height but it is not taking

Issue is this line

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

I don’t want to remove above line any solution without deleting this line

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>

Upvotes: 0

Views: 1749

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

You can select the all images inside .imgContainer ul by giving more specificity like 

.imgContainer ul li img{
  max-width: 100px
}

Also I will suggest not to use !important in the CSS, because if you use !important once you will need more !important to control it.

.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>

Upvotes: 2

Related Questions