I've got an issue about the resizing of a picture, in a full page div.
The thing is that it seems some breakpoints are missing (for 15 inch screens for example). The picture is croped at the bottom and resizes well for smaller screen.
Here is the link : http://mango-assurances.com/
Any ideas ?
Cheers,
Loïc
Your image is 1200x848 large... with your header and cookie notification area you're running out of vertical heigh and the "cropping" is natural viewport restrictions.
This UI is totally acceptable and you don't need to change it. (Remember the user could have a browser that is smaller-windowed than full screen.)
But if you do then you have 2 options: 1) Use a smaller image, & 2) restrict the width (or height) of the image with a CSS restriction (max-width:800px) - like this...
<img src="img/mango-hd.png" class="img-fluid center wp wp-7 mt80 animated
fadeInUp" style="max-width:800px">
Related
How to scale image in email body ?
I am adding html template in an email.And there is an image in that template.
And i wants,the image should be fit according to email client width.And the height should be adjust according to image width.Something like this:-
It should work in all email providers.
FYI,i am working on ASP.NET application.
Edit:
I sets the image width 100% and i am not setting the image height there.
Is this a best or correct way for it?
I would go for setting:
width: 100%;
height: auto;
Demo: http://jsfiddle.net/gjtC9/
Without CSS: http://jsfiddle.net/gjtC9/2/
The question if it's the best and correct way.. well if someone opens the email on a mobile phone where is the resolution quite small - so the huge image is scaled to smaller one quite a lot.
-> The phone will be loading huge image which will be scaled to small - this brings me more to question, is that picture really necessary? Are you going to put there those pinguins or some image that has some information or something valuable on it? :D
Use inline styles.
Like this:
<img style="width: 100%; height: auto;" ...
Ensure your img tag is not in container that sets or restricts height of the image
If you still need a container or have difficult interaction with other styles, use max-width, not width.
<img style="max-width: 100%" >
In the following image, you can see that the actual email body starts under the to object of email. I am not able to understand why do you want to do something more wide.
From your image: The image image you are providing, the photo is scaled correctly. It fits the div wrapping it, from left to right.
In my image: Well its just a text, but you can see the text starts just under the to object.
Result: You can not scale or make the image wider than this. However, I am sure you understand that you when you set the width to 100%. The browser actually does provide a 100% width from that width. Exceeding this size will maybe cause a bit problem in UI and gmail will never allow you that.
I hope you get my point.
When viewed in a mobile phone in portrait mode, images are displayed two columns per row with each image container having a width of 50%.
Sometimes though, you only get one image per row. It seems totally random!
If you flip the phone to landscape mode, the images are displayed 3 columns per row and everything works fine.
Here's an image so you can see what I mean:
As you can see the cobra glove is all on its own! The problem can be reproduced in Firefox if you resize the window so you only get 2 images per row.
If you go to http://www.snowrepublic.co.uk/ and hit the 'switch to mobile' button at the bottom of the page (black mobile phone looking icon) then select the 'gloves' category you can see for yourself. The strange thing is, if you hit the 'body armour' category, the exact same layout works perfectly.
Your issue is caused by the fact that your .centeredContent element has no height and when there is less content in one of the boxes then the box below it jumps up a little bit ( which is the normal behavior for floated elements ).
To fix it give the .centeredContent a height that will accommodate the most possible content. In your case 260px seems to be enough:
.centeredContent {
...
height: 260px;
}
I am stuck on how should I cope with the screen resolution problem ....
If I design for High resolution(1280px wide) a very long horizontal scroll comes up on low resolution monitors
If I design for low resolution the website seems to utilize jus a little space on the browser
please guide me how to get around this problem any help would be appreciated thanks
There are several suggestions...
Design your site to center everything horizontally, along with designing with fixed widths. Then make sure that the most important part of your content stays in the center. Background images can fill the background area without causing a horizontal overflow (the scrollbar being shown).
Use a design that fills 100% horizontally and make placements based on percentage width's. This may be difficult depending on your design but if you use some fixed width aspects from #1 that can help.
Use conditional CSS loads. Only recommend this if you really need very different layouts for different screen sizes (like mobile sites). You can use Javascript to get the document.body.clientWidth and document.body.clientHeight to get the current window size and load something based on this. Remember though... a user can resize the screen so it won't be as great as #1 or #2.
Google for "Responsive Web Design"
U have two choices:
1-Make your layout width about 980px. so that users with 1024 resolution and higher will see all the screen without scroll.
2-Make your layout 100% width. without specifying constant width for your elements in pixel set their width in percent. so that every body with any resolution will see the whole page without scroll bars.
I had this problem before...
CSS can't detect screen size, but Javascript can. I don't remember how, though. But it can tell you what size does the browser window have. Depending of this size, you can then link to a CSS or another.
I always use the rule of designing for the 978px Grid.
#container {
width: 978px;
margin: 0 auto;
}
This means it will fit in browsers down to 1024x768 and display centered in higher resolutions.
screen resolution problem is not solved by any margin , padding ,absolute and relative when it comes in to body element .....
this is one of solution which i can prefer for one of case :
use offset in window resize function to another element from which you want to alignment (offset top and offset left)
example :
$(window).resize(function () {
var p = $("#divfromwhichyouwantalignment"); var offset = p.offset();
$(".element1toalign").offset({ left: offset.left });
$(".element2toalign").offset({ left: offset.top + 350 });
});
I am trying to build a website for myself.. I want to use an image as the header... I have made sure that my background will scale itself for any screen resolution... How do i make sure the image(header) will also scale it self according to the screen resolution...
for example: my image is 350px int width and 130px in height.. i want this to be the size when screen resolution is 1280X768.. and should change proportionally based on screen size..
Please tell me how to do this preferably using CSS.. i am also fine with js or jquery
Thanks in advance
Raj
If you only specify the width in css, the height will scale automatically. You can easily specify the with of the image relative to its parent.
In your example you would have to specify width: 27% (1280 / 350). Note that the parent will have to be 100% wide.
You can get the screen size from the DOM using screen.width and screen.height. Then you can write some JS to load or replace with the desired image or adjust the height/width attributes on the image (which would scale it, but doesn't always look great).
There is a good article on fluid grids by Ethan Marcotte, http://www.alistapart.com/articles/fluidgrids/
You can apply these principals to your images using CSS, he does on his personal site. There even good apps to help you out.
this one has a read me -> web duck
http://inteldesigner.com/web-duck/about.php
this one has more features -> em calc
http://riddle.pl/emcalc/
I have a gradient background that I'm using like follows in an ASP.Net Webforms application:
<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>
Where foo.jpg is a 200x1 pixel image. My problem is this, the height of the injected HTML varys from about 200px to 1000+px depending on size of a datagrid. Also, this segment is part of a much larger page that uses for positioning content.
What I would like is that after the HTML is injected, have the background automatically stretch to fit the space so that the gradient is applied smoothly over the entire height.
CSS cannot stretch background images.
However, IMG elements can be stretched, so you can put an IMG right before the grid, use CSS to give it position: absolute and z-index:-1, and use jQuery to set its dimensions to be equal to the grid.
I was researching exactly how do do SLaks solution and discovered a "hack" that works for my situation. While it doesn't do a stretch operation, I'm simulating one in a way that works for my situation and it is 100% CSS. I don't claim that this is a general solution, but it does work for me.
To answer the question, I need to be a little more precise in my definition of my problem.
in my original code,
<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>
foo.jpg is 600px x 1px gradient from a color to white which is color of web site. This way on the larger displays, I get a very smooth transition from color to white. That it doesn't go all the way to the bottom is something I can live with. The problem comes when I need to render some data that displays only 300px high. Then only 300 px of the 600px in the gradient display. Resulting in an "ugly" step change in the color. This is what I really needed to get rid of by doing the resizing.
While resizing the background is the technically cleaner solution, what I did was
<div style="background-image: url(foo.jpg) repeat-x;">
<div style="background-image: url(fooBottom.png) repeat-x; background-position: bottom;"
... Injected HTML codes
</div>
</div>
fooBottom.png for me is a 200px by 1px image that is 100% white at the bottom and 100% transparent at the top.
The key thing on the inner is the "background-position: bottom;" This positions the new background section. If the section being displayed for me is >800px high, this new code does nothing visually.
But for sections shorter than 800px, what happens is the bottom image gets closer to the top. This coverage occurs because the inner block is drawn "above" the outer block. Then if the section gets shorter, the bottom background image covers more and more of the top background image.
But because of the transparency in the lower image, it ensures that on shorter sections, that there is a blend to white at the bottom.
I'm going to create a blog on my personal site that shows examples. When I get the example done, I'll update this post.
UPDATE - I've posted a working example at http://sntsoftware.com/Blog
I've been in your situation before, and I ended up having about five different background images for the resolution variations. If it was their first time to the site (no cookie present), I'd present them with a landing page where I set a cookie (using Javascript) with the value of the client resolution (see my getViewportDimensions function in this blog post). On the server-side, I evaluated the resolution on the next request and chose which image to inject in my CSS. It works well. Be sure to have a default resolution set on the server-side in case the user agent has Javascript or cookies is disabled.