Topic: How to control image display size?

DentsyDev free asked 5 years ago

Hello. I am producing a web page for my company but very much learning (making it up) as I go along. Mostly got to grips wiht the basic usage of the grid system etc, however an area where I am lacking knowledge is images. I have two questions which is realise are somewhat basic:

Firstly, how do I determine / control my image display sizes? Do I simply resize the source image to a chosen number of pixels (in some image software) that appears suitable or do I control how large the images are displayed using the grid system? For instance, say I wanted a .png to display centered above a heading, with the image being roughly a fifth of the screen width, what is the best way of doing this?

Secondly, if on a page such as one describing product features, I want a single image next to some text/bullets/whatever, but when the user clicks on it, it then displays a larger version, how do I do this? Is that what I use light box for?

Thanks for any help. I realise they may be fairly basic or fundamental questions, but you don't know stuff until you do!



MDBootstrap staff answered 5 years ago

Hi Jason,

there is nothing wrong in asking simple questions. My answer, to your first question: I recommend styling, this image by wrapping in a div that is part of the grid. This is probably the simplest way of doing it properly, but to be honest, there are plenty of possibilities for you:

Getting something around 20% is hard with grid because it is built on 1/12 cells. Getting 25% would be much easier because you can create it just by taking 3/12 of the grid. For example, you can set an image as background-image of an element and style it as a background. I could write you really long essay about the possible ways of styling images, but to wrap it up it depends on what you are trying to accomplish. To learn more about our recommended way of working with images reads this article and please, understand the examples:

The second question you get right on your own. Just implement the light box and your functionality is done. To read more about it:

I wish you great time learning web development.

Best Regards, Piotr

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No