Bootstrap/CSS How to shrink image on webpage

HTML-CSS
1

Hello,

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.

Blockquote

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

2

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

1 Like
3

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)

4

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.

5

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

6

You can still override Bootstrap, just add width and height parameters to the image.
For example https://www.w3schools.com/css/css_dimension.asp
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: https://www.w3schools.com/css/css_rwd_images.asp
So the code can simply be:
img { width: 100%; height: auto; }

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

8

i also facing same type of problem ,i resize them using the 3d paint,but i also want some more relaiable solution for it

1 Like
9

am facing this exact problem on a website am working on using bootstrap, and i tried all this methods but somehow they refused to resize my images, am still stuck there.

10

@geraldombuthia, the post you’re adding on to is two years old.
In order to get help with your issue you should;

  • create a new topic describing your problem, what you’ve tried and the results you are seeing
  • provide a link to your code (codepen, repl.it, etc)
  • open the topic in the maybe the ‘Certifications Project’ forum or ‘Programming Help’ forum.

Good luck and happy coding!

1 Like