I've been making a tumblr theme using html/css and it allows the user to input their own image that will show up in their sidebar on the theme.
I'm not sure how to constrain the image to a certain region/size on the screen. What I have right now for the css of the image (which is probably excessive)
.sidebaricon {
margin-left: auto;
margin-right: auto;
width: auto;
height: auto;
max-width: 500px;
max-height: 500px;
}
But when I upload differently sized photos they don't constrain to the same size. I want all the uploaded images to constrain to a 500x500px square region.
Please help! Thank you.
As far as I understand, you try to upload an image and set it a max width. There's some mistakes in your code and some things that can be confusing (e.g. : your sidebar and its image have the same class).
First you need to set a width to your sidebar:
.sidebar { /* I renamed the container to avoid any misunderstanding */
width: 30%; /* or whatever */
max-width: 500px;
}
Then, the image in the sidebar :
.sidebar .sidebaricon { /* this should be your img */
max-width: 100%;
height: auto;
}
The logic is quite simple : you let the image to fill 100% of its parent's width, so you just have to play with the parent's width.
A lot of CSS frameworks use the same technic to provide a quick way to make all images "responsive", like this :
img {
max-width: 100%;
height: auto;
}
Again, this means : all images in the document body should have a maximum width of 100% of its container. I added the automatic height as some old IE doesn't keep the ratio by default.
Related
I'm making this responsive webpage: http://jsfiddle.net/GeDxr/174/
I need the images in the screen to be seperate, so I put them in a table. Problem is, the table screws up when resizing. Is there any way to keep the 'screen' a neat image, consisting of these different parts?
Current table / images in cell css:
table {
width: 100%;
background-color: #00BF6E;
min-height: 100%;
}
img {
width: auto;
height: auto;
}
Thanks!
You have a min-height on your images. I commented this out for you in the follwing code:
.css-mb .mb-screen img {
width: 100%;
/* min-height: 100%; <-- remove this */
position: center;
}
If you give a min-width and a min-height the images will get distorted because the width-height ratio changes (they both fill 100% of the available space). Using only a min-width makes sure the ratio stays intact.
When a user loads the page, I want an image to fill the entire screen. What I want is very similar to background-size:cover, but I want to be able to scroll down without the static background.
This is what I have so far:
body {
margin: 0;
}
#bg img {
z-index: -1;
position: absolute;
max-width: 100%;
}
The only problem with this, is that the image height is not restricted to the height of the browser window. height or max-height does not make any difference.
Is there any simple way of achieving this in pure CSS?
Use the vh and vw Viewport-Relative Length units.
#bg img {
height: 100vh;
width: 100vw; /* If you want it to be full width as well as height. */
}
I have some images that I want to add to my web(the image width should be as the screen width). the problem is that there are a lot of screen which means that there is a different between each one to another screen size/resolution. I tried to set the image width to 100% but in some cases it works great and in some case it distort it. Someone can please tell me the solution to this problem?
Set the img CSS to width: 100%; height: auto;
img {
width: 100%;
hegiht: auto;
}
DEMO
*
{
margin: 0px;
padding: 0px;
}
body {
background-color: #FFAF0A;
}
#wrapper {
width: 100%;
height: 1000px;
}
#header {
background-color: #222222;
height: 120px;
width: 100%;
}
#body {
width: 100%;
height: 700px;
}
#leftNav {
float: left;
width: 15%;
height: 700px;
background-color: #F6F6F6;
}
#content {
width: 85%;
float: right;
height: 700px;
background-color: white;
}
#footer {
background-color: #222222;
height: 100px;
}
Hello all, this is my layout for my web page. Is this responsive? If not how can I make it responsive. When it comes to graphics what do i do with pixels? convert them to percentages?
Thank you in advance.
'Responsiveness' has more things to consider than making heights and widths in % of the total available. It should include css #media queries, should consider resized images for different screen widths, should also consider image layouts and dimensions for device positions like ipad vertical or horizontal.
This 'responsive' term is still not clearly defined and I can say the stylesheet you wrote above is not responsive.
EDIT
Since you are doing this in dreamweaver, it has all things you need to do for a responsive web scroll. Just follow to create responsive web page while starting a new project. Also, dreamweaver has really good interface in the bottom of the editor which has tabs of desktop, mobile device, and a tabular device icons which show how your code looks in each type of device. You should also have flexibility of jquery-mobile in it, because it contains all those things bundled, and more interestingly, it writes plain CSS for your wysiwyg editing. (Though it includes many stylesheets, beyond you feel their requirement).
You could also use css3 #media queries to include or exclude items depending on the size of you page.
A good way to experiment would be to shrink or expand your browser on a desktop of laptop computer.
For more on this, see..
Css Media queries
The others are correct about % though. When you use declare % rather that static px dimensions, you are setting your elements to adapt to a certain % of their parent elements.
Still your css will behave like liquid layout. It will break on very large screen. As you wish to create the website on 960px. So you have to give the css for wrapper like below:
#wrapper {
width: 960px;
max-width:100%;
height: 1000px;
}
due to max-width:100% your wrapper will automatically behave liquid format in small screens. Other child elements you can use % value as well.
Now there is a question how to convert fix px value to % or em.
So here is the simple rule to do this.
for em value: child width / parent width = em
For % value: (child width / parent width)x100 = %
Example:
#wrapper width is: 960px;
#leftNav width is: 200px;
#content width is: 750px;
Now for per you have to do follow the above mention rule:
#leftNav {
float: left;
width: 20.83333333333333%; /* (200/960)x100 */
height: 700px;
background-color: #F6F6F6;
}
#content {
width: 78.125%; /* (750/960)x100 */
float: right;
height: 700px;
background-color: white;
}
you can use this rule to define the fonts size in percent or em .
I have the following requirements for some CSS I need to write. I have an image that needs to fit into an area, and its size needs to stay proportional.
I want it to have a max size of 25px width and 25px height. But if it is bigger than 25px width or 25px height, it needs to be resized to fit into those dimensions keeping its proportions.
Right now, I have the following:
.imageResizeAccountInfo
{
height: auto;
width: auto;
max-width: 25px;
overflow: hidden;
}
Is this the correct way to achieve what I am looking to do?
You can use in css:
background-image: url("path/image.jpg")
background-size: contain;
This will always give you an image that is 25px wide with a height that is proportional to any resizing that was done. If you want to programmatically decide if the height or width needs to be resized, you could do that with javascript.
Use this guide for maintaining aspect ratios. I use it all the time for pictures and videos (makes youtube videos super easy to resize).
Note: This would only work if you know the aspect ratio of the image beforehand, or you add some logic to determine it. If you want something to handle any image that comes in without knowing the dimensions, this won't work.
With similar HTML
<div class='imageResizeAccountInfo'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
Add this CSS
.imageResizeAccountInfo{
position: relative;
width: 100%;
}
.imageResizeAccountInfo:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
And some additional CSS for customization
/* Other ratios */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}
May I suggest using:
background-image: url('yourimage.jpg');
&
background-size: contain;
Which will contain the photo to it's parent's height & width.
if you only need to resize an image at most at 25x25px and keep aspect ratio you only need to set
img {
max-width: 25px;
max-height: 25px;
}
http://jsfiddle.net/3rfXa/
there are three cases, a squared image will be resized to 25x25, a portrait image will be resized to somethingx25 and a landscape image will be resized to 25xsomething (with something less than or equal to 25)
maybe i don't really understand the question, cause all the other answers seems to be too complicated for a resize
note that max-width and max-height are not supported on older ie versions