CODEWITHSUNDEEP
htmlcss
greenboxgoolu
greenboxgoolu

Reputation: 139

HTML Change Image Size

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 ?

Upvotes: 0

Views: 172

Answers (4)

Md Rizwan
Md Rizwan

Reputation: 11

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>

Upvotes: 0

gnujoow
gnujoow

Reputation: 374

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

Upvotes: 1

Girish Kallihal
Girish Kallihal

Reputation: 29

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

Upvotes: 1

Daniel
Daniel

Reputation: 321

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

Upvotes: 2

Related Questions