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

Asked

Viewed 340 times

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’s like this:

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

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

javascript jquery html css

  • Uses DOM/Jquery.

  • Hello, I’m afraid I don’t understand your question. Is this trying to say if loading the page width is 200px and if the user maximizes the window should be 200px? Or what you want is to always be 100% but at most 400px?

  • Always 100% but at most 400px, @Tiagogomes. Actually, not specifically 400, which is why I don’t want to max-width:400px. Because there can come any value. What I want is always 100% and maximum the value that comes in HTML width

  • Ever tried a max-width: 100%

  • Yes @Bruno. It doesn’t work

  • There would be no way to show an example page, I think it would be much easier to help you.

Show 1 more comment

4 answers

1

It would be able to manipulate using javascript. The way you want it, I find it unlikely. Why not remove the width of the HTML and keep only the CSS. So it will always have the value of 100%.

  • I have no way to remove from HTML because this HTML is generated dynamically. I don’t know how I could solve with javascript

  • cannot move php code?

1


In css it is not possible to fetch the information.
Can do in jquery.: (is generalized 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 it as px to work.

The jsfiddle example.:
https://jsfiddle.net/9oqy5Lby/
https://jsfiddle.net/9oqy5Lby/2/
https://jsfiddle.net/9oqy5Lby/3/
https://jsfiddle.net/9oqy5Lby/4/
https://jsfiddle.net/9oqy5Lby/12/

  • If you go this way you should change the tags of your question

  • I will try to use your solution. I still can’t. What do you mean by "change question tags"?

  • I get what you mean. I changed the tags

  • I did the test but unfortunately the function is not taking the value that is within the width of HTML, but calculates the width that is at the moment... in this case, in HTML is with width 400 but because of width:100% of css, the width that the element is is 620 even if it has 400 in HTML. So the code you passed takes the value 620 and arrow as max-width... but does not take the 400 that is in HTML

  • Does it have a form of instead of being 'max-width':$(this). width(), receive instead of $(this). width() take the width attribute that is in that html?

  • I was asleep. I’ll fix it right away

  • Yeah, I figured it would work by doing this 'max-width':$(this). attr('width'), but unfortunately I tried that and it doesn’t work. When I do this no max-width is set. Only width 100% :(

  • Images must have the width attribute as in the example.

  • I put an if to only manipulate the image that has the attribute

  • This is very strange. The image has the attribute, as you saw. It is there in the example as well as in the code. But I just ran the code you gave me and it gave me this error, as if the width variable didn’t exist: Cannot read Property 'length' of Undefined(...)

  • Would it be any problem in the filter to find the image?

  • It is to do things without testing. Fixed

  • I really appreciate all your help. Unfortunately the correction does not find the element. It does not make any modifications. Sorry to take up so much of your time

  • Let’s go continue this discussion in chat.

Show 9 more comments

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 */
}

  • Hello Miguel. I don’t want to set max-width to 400. In my html can come any value within width. The html is dynamically generated by users when they make new posts on the system. What I want is for max-width to take the value that is already in html so that the images are never larger than what is set in HTML

  • Ha, I realized... The best would be with Javascript/jQuery. Would have to change the tags of your question

  • I don’t understand. I would always give the same answer 100% 400px maximum. You can exclaim better about "In my html can come any value within width" the html is fixed is not dynamic. As it looks dynamic?

  • I noticed, sorry, I hadn’t noticed that I had the width set inline (style=...) in html

  • OK. How is code generated? Instead put width="400" insert inside max-width:400 style; it is possible?

  • Yes, I believe that this solution is better. Yes

  • Unfortunately it is not possible. This html is generated by another service. It is posted in a dialog box by system users. When they place an image, they set the size. But in html it is set like this. What I have to do is a way for my css to get that value and by how max-width

  • I edited my answer, try it this way

  • Hello Miguel. I don’t think you understand. I don’t want 400 to be a fixed value, that was just an example. There you can see any value, because this width in HTML is automatically generated by the system. I want max-width to take the value of width that comes in HTML no matter what it is

Show 4 more comments

0

From what I understand, your server generates HTML dynamically and fills 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 more than its original size and you can still set the max-width by the server.

  • Yes, my server generates this html. But because I have my css saying width: 100%; my image grows as far as the window allows, getting huge! Apart from this property it doesn’t grow. But I can’t take this property away from my css.

  • The max-width inside the style has higher priority than the width of the CSS, so it won’t grow anymore. Look: https://jsfiddle.net/41efc7ny/

  • I understand. But as I said, my service generates this html, not me. It’s another service. I have no way to edit the HTML that will come.

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.