1

O problema é o seguinte: Eu tenho a seguinte html:

<div class="page-left-col">
    <p>
        <img src="/localhost/Department%20Pages/Communications/News/LearnStorm%20Rally.jpg" style="display: block; margin: 20px auto;" width="400">
    </p>
</div>

E no css está assim:

div.page-left-col img {
  width: 100%;
}

Eu gostaria de pegar esse width 400 (exemplo) que está no html e dizer para o meu css que esse width será o max-width, pois preciso deixar esse width como 100% mesmo para que ele se adapte ao tamanho das janelas. Não posso deixar 400 fixo, pois dependendo da nova postagem, essa imagem pode ser setada com qualquer outro tamanho no width. O que preciso saber é se existe uma forma de dizer no css que o max-width é o width que tiver no html.

6
  • Usa DOM/Jquery.
    – DH.
    Commented 3/05/2016 às 16:54
  • Ola, Infelizmente não percebi a sua questão. Esta a tentar dizer se ao carregar a pagina o width é 200px e se o utilizador maximizar a janela deverá ficar a 200px? Ou o que pretende é ser sempre 100% mas no maximo 400px? Commented 3/05/2016 às 17:04
  • Sempre 100% mas no máximo 400px, @TiagoGomes. Na verdade, nao especificamente 400, por isso que não quero por max-width:400px. Pois alí pode vir qualquer valor. O que quero é sempre 100% e máximo o valor que vem no width do HTML Commented 3/05/2016 às 17:06
  • Já tentou um max-width: 100% Commented 3/05/2016 às 17:47
  • Sim @Bruno. Não funciona Commented 3/05/2016 às 17:50

4 Respostas 4

1

Em css não é possivel ir buscar a informação.
Pode fazer em jquery.: (é generalizado pode causar lentidão)

<script>
   $(document).ready(function(){//executa quando terminar de carregar a pagina
         $('img').each(function(){//passa em todas as imagens (aqui pode fazer mais filtros coloquei generico)

            if ($(this).is('[width]')){
               $(this)
                  .css({
                     'max-width':$(this).attr('width')+(($(this).attr('width')).indexOf('px')<0?'px':''),
                     'width':'100%'
                  })
                  .removeAttr('width')
               ;//transforma o wdth como maximo e atualiza para ficar responsive
            }
         });   
   });
<script>

Os códigos anteriores não estavam a funcionar porque o width da imagem não tem unidade, portanto coloquei como px para funcionar.

O exemplo no jsfiddle.:
https://jsfiddle.net/9oqy5Lby/
https://jsfiddle.net/9oqy5Lby/2/
https://jsfiddle.net/9oqy5Lby/3/
https://jsfiddle.net/9oqy5Lby/4/
https://jsfiddle.net/9oqy5Lby/12/

14
  • Se for por este caminho deverá mudar as tags da sua pergunta Commented 3/05/2016 às 17:44
  • Vou tentar usar sua solução. Ainda não consegui. O que quer dizer com "mudar as tags da pergunta"? Commented 3/05/2016 às 17:51
  • Entendi o que quis dizer. Mudei as tags Commented 3/05/2016 às 17:54
  • Fiz o teste mas infelizmente a função não está pegando o valor que está dentro do width do HTML, mas calcula o width que está no momento... no caso, no HTML está com width 400 mas por conta do width:100% do css, o width que o elemento está é 620 mesmo tendo 400 no HTML. Sendo assim o código que vc passou pega o valor 620 e seta como max-width... mas não pega o 400 que está no HTML Commented 3/05/2016 às 18:22
  • Será que tem uma forma de ao invés de ser 'max-width':$(this).width(), receber ao invés de $(this).width() pegar o atributo width que está naquele html? Commented 3/05/2016 às 18:24
1

Teria como manipular usando javascript. Da forma que vocês está querendo, acho pouco provável. Por que não retira o width do HTML e mantem apenas o do CSS. Assim ele terá sempre o valor de 100%.

2
  • Não tenho como retirar do HTML pois esse HTML é gerado dinamicamente. Eu não sei como eu poderia resolver com javascript Commented 3/05/2016 às 17:10
  • nao pode mexer no codigo php?
    – Leandro RR
    Commented 4/05/2016 às 11:35
0

Pelo que eu entendi, seu servidor gera o HTML dinamicamente e preenche o width.

<div class="page-left-col">
    <p>
        <img src="https://s.zkcdn.net/Advertisers/54f16e366c5a405e8b169d56a243d215.png" style="display: block; margin: 20px auto;max-width: 400px">
    </p>
</div>

Desse jeito a imagem não vai crescer mais que o tamanho original dela e você continua conseguindo setar o max-width pelo servidor.

3
  • Sim, meu servidor gera esse html. Mas por conta de eu ter meu css dizendo width: 100%; minha imagem cresce até onde a janela permite, ficando enorme! Tirando essa propriedade ela não cresce. Mas não posso tirar essa propriedade do meu css. Commented 3/05/2016 às 17:29
  • O max-width dentro do style tem prioridade maior que o width do CSS, então ela não vai crescer mais. Olha: jsfiddle.net/41efc7ny Commented 3/05/2016 às 17:38
  • Eu entendo. Mas como eu falei, meu serviço gera esse html, não eu. É um outro serviço. Eu não tenho como editar o HTML que vai vir. Commented 3/05/2016 às 17:47
0

Com CSS:

div.page-left-col img {
    max-width: 400px !important; /* isto deve-se sobrepor aos styles inline */
    width:100% !important; /* isto deve-se sobrepor aos styles inline */
}
9
  • Olá Miguel. Eu não quero setar o max-width como 400. No meu html pode vir qualquer valor dentro do width. O html é gerado dinamicamente por usuários quando fazem novas postagens no sistema. O que quero é que o max-width pegue o valor que está já no html para que as imagens nunca fiquem maiores do que o que está setado no HTML Commented 3/05/2016 às 17:09
  • Ha, percebi... A melhor seria com Javascript/jQuery. Teria de mudar as tags da sua pergunta
    – Miguel
    Commented 3/05/2016 às 17:19
  • Não percebo. Eu iria dar a mesma resposta sempre 100% o maximo 400px. Pode exclarecer melhor sobre "No meu html pode vir qualquer valor dentro do width" o html é fixo não é dinâmico. Como fica dinâmico? Commented 3/05/2016 às 17:19
  • Percebi, desculpe, não tinha reparado que tinha a width definida inline (style=...) no html
    – Miguel
    Commented 3/05/2016 às 17:20
  • OK. Como é que é gerado o código? Em vez colocar width="400" insira dentro do style max-width:400; é possivel? Commented 3/05/2016 às 17:24

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 .