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.
Related
I'm trying to create a responsive web site. For that I found a nice looking template and adjusted it according to my needs.
One thing however came up where I couldn't find a solution so far - and that is resizing of images with different dimensions.
Let's say I have an image with a width of 600px and one with a width of 500px.
My screen size is 700px. I want both images to be shown at their native width (600px & 500px).
Now I reduce my screensize to 550px. I want the 600px image to be resized to 550px. No changes to the 500px image because the native width is still smaller than the screen.
Now I reduce the screensize to 400px. Both images should now also be reduced to 400px accordingly.
I've been googling and reading here for hours but could not find an automatic solution for this.
Best thing I found is is setting <img style="width:100%;max-width:xxx px;" where xxx is the original width of the image. But... I'd have to do this manually for each and every image!
Without max-width the image would always be strechted to 100% of the screen size.
As an alternative I found some JavaScript that calculates the original width of the image and could be used to fill out the max-width value.
If someone disables JavaScript (EG by using NoScript browser adddon) the whole thing wouldn't work.
Since I'm printing out my website using Perl I could do the calculation with Perl as well. That would help against disabled JavaScript. But still...
Are there really no better solutions? Do I really have to calculate the max-width for each and every image?
Here's the current work-in-progress: https://www.digioso.org/html5up-striped
The template features an image fit class that basically sets the width to 100% of the container and then I added the same image using width=100%;max-width=400px .
The image fit makes the image always use 100% of the screen which I don't want.
Thanks a lot!
Do not apply an explicit width or height to the image tag. Instead, give it:
max-width:100%;
max-height:100%;
check: How do I auto-resize an image to fit a 'div' container?
If you have something like this in your css:
img {
width: 100%;
}
The image tries to assume its actual size and is automatically adjusted accordingly with the container.
If you need to resize the image when your screen gets smaller, you can use #media and define the relative behaviour.
#media (max-width: 700px) {
img {}
}
I have a site that still uses Drupal 7.x. I have a top banner that works fine on a large screen with greater than 1100px. However, that same banner will not work on smaller screens, especially not on smartphone size displays. So, if I put the banner into a block with an image tag, how can I change the source image for different display widths?
I tried using a percent width and media queries for the different background images. I haven't found a way to style the background image so that it resizes as a percent of the viewport. It will change the background image based on the media queries but I cannot get the alignment or the percent width of the background image to change with the change in the width of the viewport.
Thanks in advance for any advice on how to manage this issue. Maybe there is a module that handles changing the content of a block based on the size of the viewport.
If the banner doesn't fit on your smaller screen, try using background-size: contain or background-size: cover.
It should be possible to archieve this using CSS only, without the need to have different images in all media queries.
I want a page with a fixed pixel size to always have the same percantage hight. I cant just use % or any other relative units since I already made the whole site in pixels.
Means when I have a div with a hight of 1500px and view it on a 1366x768 screen the whole 1500px div should still be visable completely.
The effect I want to accomplish is something similar to a browser zoom.
You could try min-height: 1500px; on the div, then put overflow-y: auto on the body or html elements.
If you want something to dynamically resize depending on the window height you'll want to look into either CSS flexbox, using the vh sizing, or using javascript to detect window resizing.
You could use the viewport meta tag for that. Just remove the "initial-scale=1" part and the page should always be rendered to fit the screen.
You should note that this might result in the page being shown very small which can lead to problems when people want to access it with a smartphone for example. If you want to optimize your page for different devices and screens, I suggest you make yourself familiar with responsive webdesign.
Something like height: 100vh; would make the object's height 100 percent of the viewport height. It seems like there is no way around switching from px to something else.
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.
I am having a problem with the positioning of elements on my page.
When I try to open the website on an different computer with an different screen size it gets kind of messy.
That same happens when I resize my window. Certain elements stack in each other. Every element is positioned as absolute.
I greatly appreciate any help!
Without seeing you code, it is kind of hard. But I'll try to guess the answer.
You probably have set some width, define the total width of your elements and set that a minimum width of the body. Then when the viewports size is smaller, scrollbars will appear.
Add this to your CSS:
body {
min-width: 800px;
}
Sharing some code would be good.
To handle different screen size you might have to make your site responsive. A responsive layout uses percentages instead of pixels for defining layout element sizes. If you are creating a new page you could try BootStrap http://getbootstrap.com/. Bootstrap will make your layout look the same across different screen sizes.