We can put a video in a web page either by using tag or embed it from other sites like Youtube. Therefore don’t apply img-fluid class to small size images. Small images like icons have much smaller width than any smartphone’s screen so it is of no use to resize them. When the img-fluid class applied to the image, Bootstrap automatically applies the CSS Media Queries to the image for different screen sizes.ĭon’t Add ‘img-fluid’ Class to Small Images! To make Responsive image with Bootstrap you just have to place img-fluid class on the img tag: To be more precise the width of the image is scaled down according to the column’s width where it is placed. When viewing it on iPhone 8 (whose screen width is 375 pixels) then Bootstrap will resize this image to a smaller size and thus making it to fit on the iPhone’s screen. Suppose if the width of the image is 500 pixels. For this we make them responsive using Bootstrap. The images whose original sizes are bigger than the screen width of the viewing machine have to be resized.
0 Comments
Leave a Reply. |