Bootstrap/CSS How to shrink image on webpage

Bootstrap/CSS How to shrink image on webpage



I have lionked an external image in my HTML/Bootstartp code with <img src=" HTTPP link> but it appears way too big, beauce the original JEPG image is big

How can I shrink it please? I added responisve class, but it is useless to shrink the image on my PC screen.


<img class=“img-responsive rounded-circle"
src=“JPEG image URL"
alt=“text” size=””


put the image in a container, that would be the parent and just scale the container.


I would recommend giving the image another class - one that you have made yourself and assign the size as a percentage i.e. size: 50%;

May be worth setting a max size value in the class as well.

All of this can be done without the use of Bootstrap, using pure CSS (including the circle so long as the image is square)


What do you mean by “givint the image another class” please ? I can use .img in CSS code.The problem is that the responsive fluid bootstrap code does not resize the original image. In my webpage it appears enormous in size.


If you were to have more than one image on a page that you needed to make changes to but not necessarily the same for all, I would put a new class in.

In this case, yes, you can use .img to achieve the result. In the CSS, simply add a size property on the class and as I said, a max size might be useful too so images will never exceed a defined limit


You can still override Bootstrap, just add width and height parameters to the image.
For example
Here the div width and height are changed, you can do the same with the image.
Here is an example of responsive image without bootstrap:
So the code can simply be:
img { width: 100%; height: auto; }

And you can just change the width, you can use %, px, experiment.


When you write .img, you are referring to a CSS class definition. When you write img, you are referring to all the image elements.