Mysterious padding when using CSS scale

Question

Mysterious padding when using CSS scale

Navigation

#1 by (1 votes)

1

I have a problem. When using scale() in my CSS to decrease the size of an image in the media query , it is creating a mysterious padding .

Thispaddingisnotsetanywhere,ifitistosee,istheoriginalsizeoftheimage.Theimagedecreases,buttheparentelementretainsitsoriginalsize.Shouldnotheaccompany?

Imadea codepen with the codes to view the codes and the application.

.container {
    border:1px solid purple;
}

.linha-03 {
    background:#00356e;
    padding:45px 0;
    margin-bottom:10px;
}

.linha-03 ul {
    list-style:none;
    padding:0;
    margin:0;
}

.linha-03 ul li {
    float:left;
    margin-right:55px;
    border:1px solid red;
}

.linha-03 ul li:last-child {
    margin:0;
}

.linha-03 ul li img {
    border:1px solid green;
}

@media (min-width:992px) and (max-width:1199px) {
    .linha-03 ul li img {
        transform:scale(0.8);
    }
}

@media (min-width:768px) and (max-width:991px) {
    .linha-03 ul li img {
        transform:scale(0.5);
    }
}

<div class="linha-03">
    <div class="container">
        <ul>
            <li><img src="http://placehold.it/203x48"></li><li><imgsrc="http://placehold.it/169x48"></li>
            <li><img src="http://placehold.it/137x48"></li><li><imgsrc="http://placehold.it/66x48"></li>
            <li><img src="http://placehold.it/156x48"></li><li><imgsrc="http://placehold.it/101x48"></li>
        </ul>
    </div>
</div>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>

css css3

asked by anonymous 02.02.2017 / 12:57

1 answer

Working with anonymous type Working with identical forms on the same page

score 1 · Accepted Answer

The effect of scale is not weary to the elements above it. That is, the parent elements of the object on which you are applying scale will not be affected.

To not have to give scale to the parent parent element you need, you may have to review the semantics of your code and opt for alternatives.

For example, the img tag accepts border . You can use it.

.container {
  border: 1px solid purple;
}
.linha-03 {
  background: #00356e;
  padding: 45px 0;
  margin-bottom: 10px;
}
.linha-03 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.linha-03 ul li {
  float: left;
  margin-right: 55px;
}
.linha-03 ul li:last-child {
  margin: 0;
}
.linha-03 ul li img {
  border: 1px solid red;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .linha-03 ul li img {
    transform: scale(0.8);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .linha-03 ul li img {
    transform: scale(0.5);
  }
}

<div class="linha-03">
  <div class="container">
    <ul>
      <li>
        <img src="http://placehold.it/203x48"></li><li><imgsrc="http://placehold.it/169x48">
      </li>
      <li>
        <img src="http://placehold.it/137x48"></li><li><imgsrc="http://placehold.it/66x48">
      </li>
      <li>
        <img src="http://placehold.it/156x48"></li><li><imgsrc="http://placehold.it/101x48">
      </li>
    </ul>
  </div>
</div>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>