It's far simpler to point to an example than to try and explain the problem I am trying to solve so I'll do just that (apologies to people on mobile, this won't work...)
The effect I want to achieve can be seen on VICE news (http://news.vice.com)
As you can see while resizing the browser, the aspect ratio of the image remains intact throughout certain sizes. It jumps at 1200px and again at 700px, all the while scaling both the width and the height.
Is there a way to achieve this using only CSS? My head is stuck on this one.
Thanks!
Media queries, of course.
If you look in their source code, you will see that they have 3 different versions of the same image to display at each different size (to minimize scaling). Then, by using media queries, they will display the proper one and have its width fill the page:
Here's the mobile image, for example:
#media only screen and (min-width: 43.75em)
{
.lede .lede-images img.mobile
{
display: none;
}
}
And here's the global code:
.lede .lede-images img.mobile
{
width: 100%;
}
Setting the width to 100% while not setting the height will automatically maintain the aspect ratio while resizing.
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 {}
}
Basically, I don't want the layout and formatting on my page to become nonsensical if the user resizes the browser to a really small size. After a certain limit, the page should not get any smaller as the user resizes the browser to a smaller size. The page should stay the same size and any overflow should be hidden or use scrollbars or whatever. I tried setting min-height on the body but this had no effect at all.
btw, I am already using media queries and they're nice but don't do what my boss wants.
The only think I could think of was to make some sort of element with a fixed size and that would prevent the page from getting smaller than that element.
This is where a media query and CSS will come in handy! (Assuming you already know how to use CSS)
The media query allows you to change the styling of an HTML page based on the size of the screen by using CSS (if you know any CSS).
Use it like so (but place this below all of your CSS code):
#media only screen and (max-width:480px){
//The elements you want to change here
}
As an example, any CSS code you place in this query will apply to your page if the screen width is less than 480 pixels. You could also use min-width, max-height, and min-height for this too.
Example scenario:
div {
width:600px;
height:400px;
}
#media only screen and (max-width:600px){
div {
width:100%;
height:50%;
}
}
In a case like this, if the user is in a browser window or phone with a width of less than 600 pixels, the div will take up half of the screen.
So, instead of trying to prevent things from getting smaller, make them bigger on smaller screens and windows.
There is a more in-depth article here.
Im really struggling to articulate what im trying to achieve, please bear with me on this..
I've got a small "widget" on the left and side of my page.
This work fine on bigger screens.
For example, the widget is say 300px wide in the style.
However, If i load the page on a mobile or shrink the window, This becomes unfeasably small.
How do i get it to automatically change from 300px to full 100% width if a "smaller" viewspace is observed?
So say, i shrink my window , it would suddenly jump to be 100% wide rather than 300px? ( or similar)
Any ideas?
Sorry if I haven't explained it well enough. I've googled and nothing really sticks out that achieves what im doing.. maybe im not looking for the correct terms.. In a bit of a i dont know what i dont know to google it.
Cheers
What you're trying to say is "How can I make my website responsive?". You can do that with the CSS Media Queries. Check the link and google for more informations.
To give you an idea, just try this:
.my-class{
color: white;
background: black;
width: 300px;
}
#media (max-width: 600px) {
.my-class {
width: 100%;
}
}
<div class="my-class">
Some text!
<div/>
The break point here is at 600px, for large screens you have the width of the div is at 300px, for small screens you'll get the width taking 100%. (Try to resize the width of the current window while running the snippet to understand how it works).
edit: you can also use as the following style (the idea is in the min-width), if this is what you're looking for.
my-class{
width: 300px;
min-width: 100%; /* or 100vw depending on what you want */
}
Apparently,you are using the CSS-Unit "px". If you want to have a size relative to the screen, the units %, vw and vh would be useful.
% is relative to the parent element, which is probably the whole document, so you could work with that as a relative unit.
vh represents the percentage of the viewports heigth, so you could use it for the heigth of your widget
vw represents the percentage of the viewports width, so you could use it for the width of your widget
These were just some examples, if you want to learn more about the CSS Units, go to https://www.w3schools.com/CSSref/css_units.asp
I hope I could help you.
However, if you want to keep your px unit you can use the media query, as already mentioned by Il Saggio Vecchino. This allows you to have a different design at different devices.
Also take a look at https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I'm designing a webpage, and extracted this portion into a fiddle:
https://jsfiddle.net/h703xqbt/16/
I'm not being able to avoid several layers of tags instead of a single line when the screen resizes to a smaller value or when using a movile device.
I'm trying to make it collapse into a single button that shows a dropdown list with all the tags that don't fit the screen.
I'm familiar with media queries such as
#media (max-width: 600px) {
#button1 {
display: none;
}
}
but i'm not sure how to use it for this purpose.
I've seen some webpages that do this but it becomes very difficult to follow them as they have an enormous amount of details, and can't find the fundamentals.
Is this possible using only css? (i'm trying to avoid js and jquery as much as possible, for my own reasons)
Simply give the tabs a width of 100% when the screen size is a certain width :)
#media (max-width: 600px) {
.tab-link {
width: 100%;
}
}
This way, the tabs will stay next to each other on wide screens, and occupy the full width on mobile devices, stacking on top of each other.
You can always change the 600px media query to a smaller / larger width, and give the tabs themselves a width of something like 50% if you would like two tabs next to each other.
I've created a new fiddle showcasing this here.
Hope this helps! :)
I am building a website for our studio and i came to a problem. That when i view the website on the mobile device i get a very strange gap on the right.
The website is here: www.rawstudio.ee
And print screen. - http://rawstudio.ee/img/ptscren.PNG
Second issue that i have is that when people who have wide but not high screens with aspect ratio for example 21:9 come on the website the logo goes very down and is not on the centre of there screen. The logo does not move in relation with the aspect ratio and is displayed to low. How can i fix it?
This is due to your media queries not catching the logo when it reaches a certain size.
You just need to make a slight amendment in the css for the logo once the page reaches 370px or less and also to its container.
#logo {
width: 100%;
}
#media (max-width:370px) {
#logo img {
max-width: 100%;
}
}
the strange gap is caused by the logo image, it's too large.
I suggest responsively resizing it with #media.
You can debug for mobile devices using google chrome's Device Mode
Image
As for the second part of your question, if you increase the margin-top to 50% of the #logo img tag, again with (multiple stacked) media queries, you'd probably get the result you want, but I don't think it's the correct way to do it.