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 {}
}
Related
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 trying to build a site with an initial 'landing page' look that you'd then scroll down from to see the rest of the content.
I can easily create a div that will fit the screen on the device I'm currently using, but how can I code for other devices of different screen sizes?
I've tried using '100%' which of course works initially but then continues to fill the screen when you scroll. I've tried defining a specific aspect ratio but again, that will only work for the screen I'm working on.
To be clear, I want the div, or img to fill the screen when a user first lands, then when the user scrolls the div/img should move up with the rest of the page.
I want to achieve this using only HTML or CSS.
Thanks in advance for any tips!
You can use vw and vh on the first <div> to fill the viewport. You can use this for reference: https://developer.mozilla.org/en/docs/Web/CSS/length
This'll do the trick:
.full-page-container {
width: 100vw;
height: 100vh;
}
vw and vh units represent a percentage of the viewport size. Hence 100vh will mean 100% of the viewport height and won't be affected by scrolling.
I'm trying to make a simple website with img tag, that will use the new srcset attribute. The main idea is to change the image (src) depending on the screen resolution.
Working example
The problem is with the sizes. As you can see, now it is 100vw, but it doesn't work correctly. For me, it resize img to about 80% of the screen, not 100%.
The best thing is, that when I write in CSS for img tag width: 100vw, it will resize to 100% of the screen.
Can someone help me with that? Maybe I'm doing something wrong?
The image is 1152 pixels wide, but you tell the browser it is 1500 pixels wide (1500w).
The browser then determines the image's density based on what you told it, and corrects the image's intrinsic dimensions accordingly, but since it used the wrong value for the density calculations, the image occupies 76.8% of the viewport width rather than 100% of it.
To change that, you can provide the browser with a larger resource, or tell it that the resource is 1152w.
I want to overlay a form with fields on to an image. Essentially I have created a picture that resembles and artist's desk. I have uploaded the image here:
(source: saeedalkhirbash.com)
I want the "Personal Details" section to be on top of one part of the image (post-its on a desk) and the remaining "Information section" on top of the graph paper on the desk. I have all the fonts etc already.
I have tried two methods:
method1: Coding my image as a background-image. This is easy to get form elements on top. The problem is that I cannot work out how to make the image do both of the following:
retain its proportions, with the width equal to the device width (and height scaled to retain the image's proportions);
and always show the full height and width.
I have tried adjusting the background size in %s, auto, and using cover, contain - no combination seems to work.
method2: I can make my image fit nicely with very simple code:
<img src="*.png" style="width:device-width">
and this works great. Unfortunately I cannot work out how to overlay the form elements. I have tried using z-index:1 as below, but this achieves nothing... (I have tried for both the form and fieldset attributes.
<form style="z-index:1"><fieldset> input blah blah </fieldset><form>
How can i do this ?
using a background image will be the easiest way to go. I think you will have issues with scale when viewing on a mobile device depending on how many fields you are planning on using and where.
By setting the form position to relative, and then any fieldsets to absolute, will allow you to posistion them accurately.
Your css for the background, so that it scales correctly, would look something like:
background: url('http://www.saeedalkhirbash.com/backgroundfinally.png') top left / 100% 100% no-repeat;
By setting the width of your form to be relative to its container, it will resize as the screen size changes. Using media queries is an easy way to resize based on device/screen width.
#media only screen and (max-width : 480px) {
div{width:300px;height:300px;}
}
Here is an example code pen for you - http://codepen.io/lukeocom/pen/bfeGC/
Resize the window so that it is less than 480px wide and see what happens...
For a version of the above demo that uses a relative width - http://codepen.io/lukeocom/pen/jBxzI/
Hope this helps
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.