0

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>
doğukan
  • 23,073
  • 13
  • 57
  • 69
user944513
  • 12,247
  • 49
  • 168
  • 318
  • can you please show us how you want to display the images – Xenio Gracias Mar 19 '19 at 08:48
  • If you do not remove this line `max-width: 100%!important;` you won't be able to set your images to have a max-width of 100px, it's either one or the other. I would strongly advise you not use !important, simply add specifity to your request. – Jake Mar 19 '19 at 08:55
  • add `height: auto` to the image, or consider `object-fit: cover` or consider using the image as a *background image* - the important thing is you have maintain *aspect ratio* (possible guidance on that [**`here`**](https://stackoverflow.com/questions/39289576/css-image-resize-issue/39289947#39289947)) – kukkuz Mar 19 '19 at 09:15
  • This is a Flexbox issue...on the flex items `li`, where they _shrink-to-fit_. their parent Add this rule to fix it `.imgContainer ul li { flex-shrink: 0; }` ...and to prove it is that issue, just remove `display: flex` on the `ul` and you'll see they become 100px (vertically stacked though, but still correct size) – Asons Mar 19 '19 at 10:47
  • @Jake Of course one can...see above comment about _why_ OP has this issue. – Asons Mar 19 '19 at 10:49
  • 1
    @kukkuz It is a Flexbox issue... see my above comment – Asons Mar 19 '19 at 10:49
  • @LGSon I know one can, I was simply strongly advising against using !important. Didn't notice this was a flex container though, nice catch – Jake Mar 19 '19 at 11:03

1 Answers1

2

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>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • This happens to fix it (not the proper way though), but is not the reason. Flex items are by default set to _shrink-to-fit_, in this case the `li`, hence the images gets distorted. – Asons Mar 19 '19 at 10:53