1

Estou com um problema. Ao utilizar o scale() em um CSS meu para diminuir o tamanho de uma imagem no media query, ele está criando um padding misterioso.

inserir a descrição da imagem aqui

Este padding não é setado em lugar nenhum, se for ver, é o tamanho original da imagem. A imagem diminui, mas o elemento pai mantém o tamanho original. Ele não deveria acompanhar?

Fiz um codepen com os códigos pra visualizar os códigos e a aplicação.

.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><img src="http://placehold.it/169x48"></li>
            <li><img src="http://placehold.it/137x48"></li>
            <li><img src="http://placehold.it/66x48"></li>
            <li><img src="http://placehold.it/156x48"></li>
            <li><img src="http://placehold.it/101x48"></li>
        </ul>
    </div>
</div>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>

3
  • creio que seja o padding padrão do navegador, por exemplo o chrome ele tem margin padrao dele o firefox não... saca? talvez seja isso tenta colocar o padding: 0;
    – Nathan
    Commented 2/02/2017 às 12:00
  • @Nathan, eu testei isso, obviamente. Sem resultado. Tentei zerar o padding, margin de todos os elementos acima da imagem. Commented 2/02/2017 às 12:02
  • 1
    Não é que ele está criando um padding misterioso. O ponto é que ele está fazendo o padding na imagem, não no elemento que envolve a imagem. Daí ele vai fazer isso mesmo. Não vai acompanhar. Mas se fizer o scale no pai, funciona. Commented 2/02/2017 às 12:05

1 Resposta 1

1

O efeito de scale não é canscateado para os elementos acima dele. Ou seja, os elementos pai do objeto em que você está aplicando o scale não serão afetados.

Para não ter que dar scale no elemento pai principal que você necessita, você talvez tenha que rever a semântica do seu código e optar por alternativas.

Por exemplo, a tag img aceita border. Você pode usá-la.

.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>
        <img src="http://placehold.it/169x48">
      </li>
      <li>
        <img src="http://placehold.it/137x48">
      </li>
      <li>
        <img src="http://placehold.it/66x48">
      </li>
      <li>
        <img src="http://placehold.it/156x48">
      </li>
      <li>
        <img src="http://placehold.it/101x48">
      </li>
    </ul>
  </div>
</div>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>

8
  • legal! Realmente, a lógica é que estava errada. Desta maneira, sanou o problema (em partes). Agora me diga uma coisa: mantendo o scale como você fez, tentei zerar o margin, e não está funcionando... ele buga as medidas do margin? Commented 2/02/2017 às 12:22
  • Não buga. Acontece o mesma situação, o pai fica intacto quando altera os filhos por meio de scale. Tem que diminuir também. Commented 2/02/2017 às 12:29
  • Tentei diminuir a UL toda, mas o problema vai herdando sempre pro elemento pai. Dessa maneira, como fica? hahah, vou levando o scale até o body? rs Commented 2/02/2017 às 12:35
  • Seria legal entender qual a sua ideia. Commented 2/02/2017 às 12:35
  • Outro negativo. Está difícil hoje... Commented 2/02/2017 às 13:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .