Solution 1 :

You could either set your image width and height using %, or, better, use CSS Media queries so you can have rules based on the viewport width, for example

Solution 2 :

You use meta viewport tag so and set the width and height of the image to 100%

Solution 3 :

if you would like to show your element differently via device size, the best way i think is using media query.

in bootstrap you might have saw keywords like sm, md or lg. they are all based on media query. you can find how they work on following link

the second way is render two element for each device and show each item on the targeted devices. with notation would be easy

Solution 4 :

You can try this code

    img {
      width: 100%;
      height: auto;
    <img src='' width="460" height="345">
    <p>Resize the browser window to see how the image will scale.</p>

Problem :

HTML Change Image Size Depending on Mobile/Desktop View

Beside using bootstrap , is there any way to change the image size depending on mobile/desktop view ?


Comment posted by ellipsis

you can set the height and width of the image according to the screen size

Comment posted by How do I auto-resize an image to fit a ‘div’ container?

Does this answer your question?

Comment posted by greenboxgoolu

Thanks for the help , this is the one i will use and it works !

Comment posted by Daniel

You’re wecome @greenboxgoolu, once you understand them media queries are super easy

Comment posted by greenboxgoolu

Thanks for the help , saw the method .

Comment posted by greenboxgoolu

Thanks for the help , but i will use another method

Comment posted by gnujoow

@greenboxgoolu using media query is what i recommend 😉 gl