Is there a way to set width specified in html as the max-width of this element in css?

Navigation
1

The problem is this: I have the following 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>

And in css it looks like this: 

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

I would like to take this width 400 (example) that is in the html and tell my css that this width will be the max-width because I need to leave this width as 100% even so that it suits the size of the windows . I can not leave 400 fixed, because depending on the new post, this image can be set to any other size in the width. What I need to know is if there is a way to say in css that max-width is the width you have in html.

    
asked by anonymous 03.05.2016 / 18:40

4 answers

1

In css it is not possible to fetch the information. It can do in jquery .: (it is generalized it can cause slowness) 

<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>

The previous codes were not working because the width of the image has no drive, so I put like px to work.

The example in jsfiddle:
link
link
link
link
link

    
03.05.2016 / 19:35
1

I would have manipulated using javascript. In the way you want it, I think it's unlikely. Why not extract the HTML width and keep just the CSS width. So it will always have the value of 100%.

    
03.05.2016 / 19:08
0

As far as I understand, your server generates HTML dynamically and fills the 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>

This way the image will not grow larger than its original size and you can still set the max-width by the server.

    
03.05.2016 / 19:27
0

With 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 */
}
    
03.05.2016 / 19:05
SQL - Query on a single table with null values Read file and assign each row to a different variable