{"id":5294,"date":"2025-03-06T12:22:27","date_gmt":"2025-03-06T12:22:27","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&p=5294"},"modified":"2025-03-06T12:22:28","modified_gmt":"2025-03-06T12:22:28","slug":"what-are-flexible-images","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/what-are-flexible-images\/","title":{"rendered":"O que s\u00e3o imagens flex\u00edveis?"},"content":{"rendered":"

Como tornar as imagens flex\u00edveis usando CSS?<\/strong><\/h2>\n\n\n\n

Uma regra CSS \u00e9 fornecida para a flexibilidade das imagens:<\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

img {
  max-width: 100%;
  height: auto;
}
<\/p>\n\n\n\n

Este trecho de c\u00f3digo instrui o navegador a impedir que a imagem fique maior do que o cont\u00eainer onde est\u00e1, mantendo sua altura para que a propor\u00e7\u00e3o original seja preservada.<\/p>\n\n\n\n

\n
\n\t\t\t\t\t\t\t\nDica profissional:\u00a0\n\n<\/div>\n
\n\nSe voc\u00ea deseja mais flexibilidade no redimensionamento de imagens, pode adicionar media queries CSS para ajustar as folhas de estilo para resolu\u00e7\u00f5es de tela espec\u00edficas.\n\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

O que \u00e9 o atributo srcset e como ele se relaciona com imagens flex\u00edveis?<\/strong><\/h2>\n\n\n\n

O atributo srcset permite especificar diversas varia\u00e7\u00f5es de uma imagem com diferentes resolu\u00e7\u00f5es para que a vers\u00e3o mais adequada seja carregada com base no tamanho e na resolu\u00e7\u00e3o da tela do usu\u00e1rio. Fornecer a vers\u00e3o de imagem mais adequada afeta a velocidade de desempenho e a experi\u00eancia do usu\u00e1rio.<\/p>\n\n\n\n

\n
\n\t\t\t\t\t\t\t\nDica profissional:\u00a0\n\n<\/div>\n
\n\nUsar srcset e os modificadores de tamanho permitir\u00e1 que voc\u00ea transmita ainda mais informa\u00e7\u00f5es ao navegador sobre a fonte de imagem mais adequada a ser usada.\n\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

Quais s\u00e3o os benef\u00edcios de usar imagens flex\u00edveis?<\/strong><\/h2>\n\n\n\n

Imagens flex\u00edveis, quando implementadas sob certas circunst\u00e2ncias, podem levar a:<\/p>\n\n\n\n