Question 246216 in Html Question posted in
Some basic documentation can be found here.

Html – Styling Image size in the picture element

I’m new but eager to learn.
So, I’ve been learning html and css until i bumped into the so called picture element. (I’ve had no problems with the img element prior. When I want to set a width and height for my image which is very large btw, it’s not working with the widht and height attribute. My image and the srcset attribute are inside the picture element so i really don’t no what to do. I also tried using sizes attribute but no use either. How do i style the size of my image in the picture element?? Thanks

Tags:

2

Answers


  1. 0

    u need to add some CSS rule for that,
    like the object-fit rule

    Login or Signup to reply.
  2. 0

    To set the size of an image inside a <picture> element, style the nested <img> element. The <picture> itself doesn’t display the image; it provides source options for the inner <img>.

    HTML Example:

    <picture>
    <source srcset="large.jpg" media="(min-width: 1000px)">
    <source srcset="medium.jpg" media="(min-width: 600px)">
    <source srcset="small.jpg">
    <img src="default.jpg" alt="Description" style="width: 100%; height: auto;">
</picture>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search