-2

Im trying to add responsive sizing but Joomla won't take it. It won't accept the 50% as % it takes it as px. I want to add responsive sizing for the images when you size down the website view.

enter image description here

This is the code I`m using

<div class="image123">
  <div style="float: links; margin-right: 5px;" width="50%" height="auto">
    <img class="mouseoverzoom" src="https://via.placeholder.com/300" alt="Vergil Stationary" /></div>
  <div style="float: left; margin-right: 5px;">
    <img class="mouseoverzoom" src="https://via.placeholder.com/600" width="531" height="340" /></div>
  <div style="float: links; margin-right: 5px;"> <img src="https://via.placeholder.com/300" height="200" width="200" /></div>
</div>

this also does not work

<div style="float: left; margin-right: 5px;"><img class="mouseoverzoom" src="images/ary.jpg" width="50%" height="50%" /></div>
Monsterthrx
  • 1
  • 1
  • `float: links` needs translation. :) – isherwood Feb 24 '22 at 17:42
  • Also, div elements don't have `width` or `height` attributes. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div. – isherwood Feb 24 '22 at 17:44
  • You'd be wise to abandon inline styles and use a [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element instead. Also, use an editor that knows HTML better than you do. It'll point out problems. – isherwood Feb 24 '22 at 17:45
  • Finally, floats are a poor layout mechanism. They're fraught with pitfalls and were never intended to align structural elements. Use inline-block display or [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) instead. – isherwood Feb 24 '22 at 17:47
  • Since there are so many issues here I'd suggest you make some of those corrections and post a new question with a more specific goal stated. It's not clear what you're trying to do. See [ask]. – isherwood Feb 24 '22 at 17:51
  • We can see the problem. We don't know your desired outcome. As I said, though, you need to fix all those problems first. – isherwood Feb 24 '22 at 18:02
  • I encourage Joomla users, to join [joomla.se] Stack Exchange and ask their Joomla-related questions there. – mickmackusa Feb 24 '22 at 22:32
  • Give us a link to the site you're making the edit. I also think this is a HTML/CSS issue and not Joomla perse. – David Addoteye Mar 19 '22 at 09:15

1 Answers1

0

The standard value scale for inline attributes "width" and "height" for img tag in HTML is in pixels, you need to add a css class to this img element so that you can use percentage scale for sizing. you may change it like this :

<img class="mouseoverzoom" src="images/ary.jpg" class="resized" />

and then add the .resized class to css stylesheet like this:

img.resized {
width:50%;
height: 50%;
}

there is a nice guide in this link

https://imagekit.io/blog/how-to-resize-image-in-html/

Raheleh Yoosefzadeh
  • 11
  • 2