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 1 :
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
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
Solution 4 :
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>
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 ?
Comments
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