Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mdpirangi

Imagem responsiva

Por , em Desenvolvimento frontend

Recommended Posts

mdpirangi    0

mdpirangi
Postado

Podem me dizer o que acontece... tenho uma div que contem uma imagem dentro cujo nome da imagem vem do banco de dados '' tag img", aplicando css na div e na imagem a div fica responsiva mas a imagem não.....

 

Segue o html e o css

<div class="img_prod_selec">
    <img  src="<?php echo PATH;?>/imagens/<?php echo $produto->prod_img_padrao;?>"/>
</div><!-- final img_prod_selec-->

.img_prod_selec{
   float:left;
   width:25%;
   height:66%;
   overflow:hidden;
}

.img_prod_selec img{
   max-width:100%;
}

Grato!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

pmmartinelli    13

pmmartinelli
Postado

Olá.

 

Neste caso o atributo "width" da imagem deve receber o valor de "100%",

 

Apenas o "max-width" não é suficiente, já que ele serve para limitar as dimensões da imagem quando esta já tem sua dimensão padrão "width" como variável. Quando omitido o atributo "width" da imagem, o padrão é o valor absoluto equivalente ao tamanho real dela, portanto o mesmo que "100%". Por isso o "100%" aplicado ao "max-width" não parece ter efeito.

 

Recomendo que faça o seguinte para um melhor resultado:

 

Aplique o valor variável ao atributo "width" (ex.: width: "100%")

Aplique um valor máximo absoluto ao atributo "max-width" (ex.: max-width: "250px")

 

Desta forma você estará configurando a imagem para se auto-ajustar, mas somente até o limite máximo informado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mdpirangi    0

mdpirangi
Postado

Ta estranho... tentei com width 100% mas não redimenciona... funciona com todos os elementos , meno a imagem....

 

css atual ...

#img_prod_selec{
   float:left;
   margin-top:5px;
   margin-right:5px;
   width:26.5%;
   height:66%;
   margin-bottom:5px;
   overflow:hidden
  
}
#img_prod_selec img{
   width:100%;
   max-width:350px;
   
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

pmmartinelli    13

pmmartinelli
Postado

Efetuei um teste aqui com o teu código e a imagem respondeu corretamente.

Copie e cole este código em um arquivo html separado e faça novos testes.

 

É possível que algum outro CSS esteja interferindo?

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
          #img_prod_selec{
               float:left;
               margin-top:5px;
               margin-right:5px;
               width:26.5%;
               height:66%;
               margin-bottom:5px;
               overflow:hidden;
               border:red solid 1px;
          }
          #img_prod_selec img{
                width:100%;
                max-width:350px;
          }
      </style>
  </head>
  <body>
      <div id="img_prod_selec"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Peacekeeper-missile-testing.jpg/350px-Peacekeeper-missile-testing.jpg" alt=""></div>
   </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

mdpirangi    0

mdpirangi
Postado

 

Grato pela ajuda....realmente funciona.....encontrei o problema....nessa imagem coloquei o mlens do jquery para o efeito de lupa, se eu tiro o plugin funciona, coloco para.....

 

Vou ver o que é.....por enquanto vou deixar desabilitado....

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito