I have an image that I want to resize when the width of the page/screen changes.
This code almost does what I want:
.section
{
position:relative;
min-width:600px;
max-width:1200px;
height:auto;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}
.image
{
position:relative;
display:inline-block;
vertical-align:top;
width:100%;
height:auto;
}
<div class="section">
<img src="long_img.jpg" class="image"/>
</div>
The problem is, the image is 2560px wide, and the section is only 1200px. The image gets squashed horizontally to fit, which scales the height down. But, when the page is at it's max width(1200) I want the image to be at full height(400). So I need the image to hang over the edge, but still automatically resize.
The reason I don't just crop the image is because I want to scroll it with a css animation.
I've tried .image{ margin-right:-1360; } but it had no effect.
Use a media query after the css that you have there. This will remove the 100% declaration and let the image be it's natural size.
#media(min-width:1200px) {
.section img {
width: auto;
display: block;
}
}
Also, take away the overflow:hidden from the containing div.
See this fiddle for an example.
Related
I'm trying to make a site similar to this: http://www.awerest.com/demo/myway/light/
A single paged site with a responsive image that takes up the full screen, on any device. That's my issue I can't figure out a way to get a background image to go full screen on any device.
<img src="C:\Users\Jack\Desktop\City-Skyline.jpg" class="img-responsive" alt="Responsive image">
I came across this but no luck, if some one can point me into the right direction on how to do this it would be very appertained.
The crucial part here is to set up the height of your content as 100% relative to the viewport (html element). By applying the background image to a div and not just using an img you also have a lot more flexibility in how its displayed, background-position keeps it always centered, background-size:cover keeps it scaled.
Demo Fiddle
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%;
width:100%;
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}
Well.. my english is not good, so i draw what i want..
FULL PAGE: http://d-3.me/full.jpg
The green container it's my content wrap. The Black and Red Squares, are some button's to access another pages.
So when i resize the page, i want to keep theses button's like this another image:
1024px Window Views: http://d-3.me/1024.jpg
this is my initial HTML :
<div id="wrap_home_bts">
<div class="bt_woman"></div>
<div class="bt_man"></div>
</div>
and this is my css:
#wrap_home_bts{
position:relative;
width:100%;
height:100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
position:absolute;
left:0;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
right:0;
bottom:74px;
}
but this way, the "button's" accompanies the resized window.
I clear?
Instead of positioning your blocks using left and right 0px, position them to 50%, and then align them the way you want using a negative margin. This should work, although you'll have to adjust the margins to fit exactly like you want:
#wrap_home_bts{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
display: block;
position:absolute;
left:50%;
margin-left: -650px;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
display: block;
left:50%;
margin-right: -650px;
bottom:74px;
}
http://jsfiddle.net/E4mmz/
.bt_woman and .bt_man are absolutely positioned in #wrap_home_bts which's width is set to 100%. That way #wrap_home_bts size will change with browser resizing and the position of .bt_woman and .bt_man will follow this element. Perhaps it will be better that .bt_woman and .bt_man to be outside the #wrap_home_bts. Then you may set some width to the body element with javaScript, like the width of the screen. That way they will never change there position on resize.
I have an image I'd like to show in a browser such that:
If the image is smaller than the browser viewport, the image is centered
horizotally and vertically.
If the image is larger than the viewport, the image is scaled down to fill
as much of the viewport as possible without adjusting the aspect ratio of the
image. Again, the image is centered horizotally and vertically.
I do not want to use JavaScript; what's the best/most semantic HTML and CSS to do this?
Update I've been asked for clarification regarding semantics: the image is content; the only content within the HTML.
Solution
#GionaF ideas got me to a happy (and very simple) solution:
HTML
<!DOCTYPE html>
<head>
<title></title>
<LINK href="test2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<img src="photo.jpg" alt="photo" />
</div>
</body>
CSS
img {
max-width:100%;
max-height:100%;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
You can achieve it in many ways, but i can't be "semantic" without knowing the context (is the image the main/only content of the page? is it in the middle of a blog post?), so i'll go for a div.
1. position:absolute; + margin:auto;
Support: crossbrowser
HTML
<html>
<body>
<div id="container">
<img src="your-image.jpg">
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
position:relative;
}
#container > img {
width:100%;
max-width:400px; /* real image width */
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
Demo
2. display:table; + display:table-cell; + vertical-align:middle;
Support: IE8+, all other browsers - with IE7 fallback (Source 1) (2) (3)
HTML
<html>
<body>
<div id="container">
<span> /* it's important that you use a span here
not a div, or the IE7 fallback won't work */
<img src="your-image.jpg">
</span>
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
display:table;
*display:block; /* IE7 */
}
#container > span {
display:table-cell;
*display:inline-block; /* IE7 */
vertical-align:middle;
text-align:center;
}
#container > span > img {
width:100%;
max-width:400px; /* real image width */
}
Demo
3. background-size:contain;
Support: IE9+, all other browsers - with vendor prefixes (Source 1) (2)
HTML
<html>
<body>
<div id="container"></div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
margin:0 auto;
max-width:400px; /* real image width */
background:url(your-image.jpg) 50% 50% no-repeat;
background-size:contain;
}
Demo
Be careful for how IE8 renders height:auto;, may not keep the ratio.
Edit: i just realized that you wrote "without adjusting the aspect ratio of the image". If you really don't want to keep the ratio, it's easier ... but do you really mean that?
You won't be able to accomplish this unless you have a set height for the container that houses the image. In order for the viewport to know where to have the image centered, it will need know the full height you are working with, as opposed to staying the same size as the image. Height will only expand if it is told to, or if there is actual content filling it up.
To center horizontally you will need to set a container around the image and give it a margin of '0, auto'. Set the image width to be 100% within the container (this will keep the proportions correct as the height will scale appropriately with it), and give the container a percentage based width as well.
You will need to give your image or surround div a set width and height for margin: auto to center the image. See how the code below works for you.
Css
#container {
width: 1000px;
height: 1000px;
}
#img {
background-color:#000;
width: 100px;
height: 100px;
margin: 0 auto;
}
HTML
<div id="container">
<div id="img">
</div>
Edit
Set image as background?
Then set the body to 100%.
body
{
background-image: url('background.jpg');
background-repeat: no-repeat; /* you know... don't repeat... */
background-position: center center; /*center the background */
background-attachment: fixed; /*don't scroll with content */
}
I wasn't able to find a perfect solution (from what I've read it's not possible to do what you want using only CSS and HTML). But I've found a solution closer to what you need. I repeat, it's not perfect. So here it goes (you actually put your image as a background for a div):
#mydiv {
width: 100%;
height: 100%;
position: relative;
background-image: url(photo.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: auto 98%, cover;
}
So, the key here is the background-size property. What it does here: force the image to scale (up or down) to a specified percentage of the width/height of the div/container (the width and height of the div is dictated by the viewport). For images bigger than viewport, this solution is good, but the problem is with smaller images (which are scaled up). Unfortunely, the current implementation of CSS doesn't permit to specify a max-height or max-width for the background-image. If you want to read more on this subject open this webpage: http://www.css3.info/preview/background-size/.
Anyway, a JavaScript solution is better. Hope it helps.
I am having issues horizontally centering my slideshow images so that they are central on all screen sizes / resolutions.
The HTML looks as such
<div id='banner'>
<div class='slides_container'>
<div>
<a href='#'><img src='images/banner.png'></a>
</div>
<div>
<a href='#'><img src='images/banner2.png'></a>
</div>
</div>
</div>
And the CSS to match this is:
#banner {
width:100%;
margin-bottom:50px;
}
.slides_container {
width:100%;
height:500px;
}
.slides_container div {
width:1100px;
height:500px;
text-align:center;
}
I am really struggling here to get the image to center on all screen sizes since padding and margins don't work I am in need of a different method!
Any replies are extremely appreciated.
You should make sure the .slides_container div is centered within its parent, i.e.
.slides_container div {
margin: 0px auto; // center
width:1100px;
height:500px;
text-align:center;
}
If that doesn't work, you need to make sure the parent container is width 100% of the page.
If the parent is not width 100% of the page, the parent needs to have this property also:
.slides_container {
margin: 0px auto;
}
If that doesn't work, then you need to make sure its parent is 100% width of the page.
Hope this helps.
Edit
I took a look at it in FireBug, and it was immediately apparent that the slide container is set to 3800px wide, and the div inside doesn't have a width set. If you set the div inside the slide container to 100% width, it will cause it to become 3800px wide, so that won't work.
By the nature of the script you are using, it is using an abolute-positioned div to work. So margin: 0px auto won't work here.
The solution is a bit of javascript to run onload, and on window resize, to set that div which holds the image to the width of your browser window, and text-align: center. So for example, since I have 1280px wide monitor, this centers the image for me:
.slides_control div {
width: 1280px;
text-align: center;
}
Add .slides_container img and margin:0 auto
#banner { width:100%; margin-bottom:50px; }
.slides_container {
width:100%;
height:500px;
}
.slides_container div, .slides_container img {
width:1100px;
height:500px;
text-align:center;
margin:0 auto; }
Normally they use margin:0 auto; to handle this. text-align won't do you good for div.
I need to fit an image inside a 300x300 div without stretching the image. I've seen this on the huff post, the slider on this page :
http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html
The images are clipped but not stretched.
Instead of using max-width, max-height.
How do I do this?
Those images on the site you linked to are actual size, so the simple answer is just to resize the image.
You can't really do this without "stretching" the image if the image happens to be less than 300px wide or tall, but you can do it without changing the ratio, which is what I think you mean.
Here's the basic idea:
<div><img></div>
If you want to use 300px as a minimum width (you expect small images that need to be bigger), try this:
div {
width:300px;
height:300px;
overflow:hidden;
}
div img {
min-width:100%;
}
Demo: http://jsfiddle.net/Z47JT/
If you want to clip images (because you expect them to be big) but not enlarge them, try this:
div {
width:300px;
height:300px;
overflow:hidden;
position:relative;
}
div img {
position:absolute;
}
Demo: http://jsfiddle.net/Z47JT/1/
Combine both these techniques if you want.
Another way is to simply use background-image on the container instead, but resizing it (if you want to stretch smaller images) will be difficult unless you use background-size which isn't fully supported. Otherwise, it's a great easy solution.
Use the flex box solution
Here is the html,
<div><img /></div>
Add styles
div{
width:100%;
height:250px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden
}
div img{
flex-shrink:0;
-webkit-flex-shrink: 0;
max-width:70%;
max-height:90%;
}
simple way to do this....
.div {
background-image: url(../images/your-image.png);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}