In my website I have a row containing 3 images - http://icestartup.com/testsites/site248gfj/. You will be able to see it if you click on the main menu item called "ruimtes".
The 3 images are not having the same height. If i change my screen size the height keeps varying as well. I would like the 3 images to be of same height so that it looks aligned.
PS: I tried to use the CSS: height: 275px; but the image gets stretched! I don't like that. What i wanted was the image to be of same height without changing aspect ratio.
I am stuck with this CSS for an hour. Any idea folks?
Try max-height: 242px; This will work.!
Related
so i have this simple problem with Bootstrap but i have not found a solution to it and it goes like this: i want to have a carousel in my web page and i took the code from Bootstrap's official web page and i want to display 1200 x 400 images but if an image i want to display is not that size, it could be smaller or it could be bigger, what should i do to make that image fit on the space if it's not the size i want... i have tried with html specifying a width and a height but it doesn't work. Maybe this question is a little bit silly but i have not found a way and also i have tried to change the size of the image but it was unsuccesfull.
Thanks for the answers!
It is often recommended for slider to keep all your images same dimension. But if there is no way left to do so, you can make CSS adjustments.
For an example:
You can give same dimensions (height and width) in CSS for all those images. and use object-fit: cover; so that image does not squeeze.
this is my first post here. I am beginning my journey with css and html. I'm struggling with putting two responsive images next two each other that would act as buttons. What I am trying to get at is that all content is displayed on single page (without scrolling) and that the no matter the size of the screen it is always filled. Then with portrait mode on mobile screens it would display after each other.
This is how far I got already: http://test.fulfeal.co.uk/shop-intro/
I can't figure out whether it is to do with image size (the actual image is going to be a picture) or maybe with corresponding div sizes.
Thank you in advance for any help!
In order for the images to take up the full page height, first make sure that you have the following:
html, body {
height: 100%;
}
This will make sure your content can actually take up the full height of the page. Then, your images should also have their height set to 100%.
For the images to show up on top of each other for mobile, you'll need to use css media queries and then set the images to display: block; width: 100%.
I am fairly new to html/css and I am coding a website for my mom. (Live example here: http://jleblanc.pancakeapps.com/index.html) and for the life of me I can't make the photos any smaller. Do you guys have any ideas?
If images are set in following format:
<div id="PlaceHolder"><img src="source.jpg"/></div>
You can add rule in CSS:
#PlaceHolder img{
width: 400px;
}
If you set height or width - it will automatically resize image maintaining it's aspect ratio.
Assuming you're talking about the oversize background images in your colored tabs, the problem is that you have background-size: contain set which is scaling the image to the container size. Choose another background size (background-size: (x)% (y)% maybe?
(You'll get better answers if you reduce your question down to the specifics of what you're trying to do and give example code of what's not working, rather than just linking to a website and asking what's wrong with it)
You can set image as responsive by making them size to 100% so they can fit any size.thanks
I am trying the carousel example here http://getbootstrap.com/javascript/#carousel with image of 1200x300. It looks fine in large screen with width more than 1200. However when I reduce the browser width the image in the carousel decrease and it looks thin.
Is there any trick to have kind of minimum height applied to the image within carousel.
You can use CSS media queries to achieve what you need.
Basically what I think is happening as I don't have any code to look at is that you have responsive bootstrap on which you need to turn off otherwise bootstrap cleverly resizes the objects on the page.
Also I noticed that if you resize the image http://placehold.it/1200x300 then it shrinks though that might not affect it at all
If you set max-width: 100%; height: auto; on the img, it will retain it's aspect ratio (i.e. remain the correct shape) no matter how narrow you make it.
I was wondering of some one can give me a hand on a little thing. I working on a personal project and can't get one thing of it correct.
Here is the JSBin http://jsbin.com/inixuf/1/edit
The problem is in images, if the screen is smaller then 21" and say is 15.3" it will only show 3 images per row while on 21" it will show 4 images per row and as you get bigger it will show more and more. This is not what I wan't I want a script that can force re-size the image div class in order to assure that no matter what's you're screen you will always be getting 4 images per row.
Any suggestions?
use % to set the widths.
So an image is width:20% of div width, with a margin of 2.5% on each side of the image. That way you fill up the 100% nicely.
.imagecontainer {
width: 20%;
margin-left:2.5%;
margin-right:2.5%;
}
and then have all sizes be relative