HTML Change Image Size

Question

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 ?

you can set the height and width of the image according to the screen size — ellipsis, Feb 13 '20 at 09:20
Does this answer your question? [How do I auto-resize an image to fit a 'div' container?](https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container) — bytesizedwizard, Feb 13 '20 at 09:35

score 2 · Accepted Answer · answered Feb 13 '20 at 09:23

2

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

answered Feb 13 '20 at 09:23

Daniel

321
2
11

1

Thanks for the help , this is the one i will use and it works ! – greenboxgoolu Feb 13 '20 at 09:29
You're wecome @greenboxgoolu, once you understand them media queries are super easy – Daniel Feb 13 '20 at 09:32

score 1 · Answer 2 · answered Feb 13 '20 at 09:25

1

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

answered Feb 13 '20 at 09:25

Girish Kallihal

29
1
11

Thanks for the help , saw the method . – greenboxgoolu Feb 13 '20 at 09:29

score 1 · Answer 3 · answered Feb 13 '20 at 09:28

1

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 https://getbootstrap.com/docs/4.4/layout/overview/#responsive-breakpoints

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

https://getbootstrap.com/docs/4.4/utilities/display/#notation

answered Feb 13 '20 at 09:28

gnujoow

374
1
3
16

Thanks for the help , but i will use another method – greenboxgoolu Feb 13 '20 at 09:29
@greenboxgoolu using media query is what i recommend ;) gl – gnujoow Feb 13 '20 at 09:30

score 0 · Answer 4 · answered Feb 13 '20 at 09:41

You can try this code

<html>
    <head>
    <style>
    img {
      width: 100%;
      height: auto;
    }
    </style>
    </head>
    <body>
    <img src='https://lh3.googleusercontent.com/86arOE_jc_FYR6_mPbeXrzWB4LwvgCRWPGXbbftgG4_zAjY05ajbmq3xiG0Xc_uYCoTccikGvLdo5WIlofH5pmySn1VRejqngh2pwDLquiLJYayCOJKUrZKFnOwmSxKzQqqOM1y5o42TPk6LYR1vbPjrEPx3dQIUEwS4IPRjzt3JdPZT32TkqCECm-PoQtsBAPnyN6g46PbiyD9fblgzuBcT2xuO1AaZgOkR53bom8ATCBkDgcYT_mnsxWuxLGp6cNFUR4lWBFKyYkYJWJY--KmIVCWDDoJ3SxwjimGjwRG-X2Qu3AP4wa6tRazHuBo3a8IOofm6f5arSRdpVy4AaXoacTPz8TSkcofA0YaIttHpek1Gi5v1yMSbi5mHV6Mfv4lyczXPp8c5iNR7IFPvgMz1BiCETTxNwSvDjb2JCN94_256Fzejrs-Dk-kMYeCCYQh2Zd_lt9xiEQDgZ5gufdpxxM9xDiP447vrOqKbBMcAS_6hu43EwRi97ILAhBpS3QLP-4WhKf4GHauWqML_EcBvhszB-6T1iGeCWvpAT9jZVDVgekalBvLZiZNoy5Ow9QlnHA=w1827-h711-no' width="460" height="345">
    <p>Resize the browser window to see how the image will scale.</p>
    </body>
    </html>

HTML Change Image Size

4 Answers4