I have been having a heck of a time getting a background image to stretch on the screen to fit the screen so I have no decided to just add it as an image. Below is a image of what I am trying to accomplish. I have cleared all of my CSS and HTML for that section and looking to start from scratch again. Thanks so much for the help.
www.jobspark.ca
your parent container already fixed width by 960px. and if you change your container width it will affect your whole design. better try my below code. make position absolute your image and you can stretch
.image-block-outer-wrapper{
height:338px;
}
.image-block-wrapper{
position:absolute:
//align this div using margin
}
.image-block-wrapper img{
width:1200px;
//or increase original image width by photoshop and set width here whatever you want
}
If you wish to have the image stretched across the width of the page and are happy to have the image height scale proportionally try -
.image-block-wrapper {
width:100%;
display:block;
}
.image-block-wrapper img {
width:100%;
height:auto;
}
Please ensure that the "image-block-wrapper" element is not nested inside any other element which has a fixed width. Additionally the tag should not have width and height attributes specified.
Related
I am trying to make an image fit the browser window in relation to its height and respond dynamically to window size.
I need the image aspect ratio to stay the same but the image can be ,larger than its originally resolution if viewed on large screens.
I don't want the image to spill outside of the screen and create a scolling effect.
The image must stay centered inside is container both vertically and horizontally.
Here is an example of what I am trying to achieve.
It is not clear what you tried so far and we don't see any code. I'll try to answer anyway and perhaps it'll help you.
First of all, when you working with responsive layouts, always try to size your elements with viewport height and width. This helps you keep your content relative to the browser size - no matter if resized nor how large the screen is.
This code might help you insert a responsive image to your site:
div {
width:80vw;
height:80vh;
}
img {
max-width:100%;
height:auto;
max-height:100%;
}
Working example here
In this example is div sized 80% of both window's height and width, so it never exceeds the viewport. Max. measures of img are 100% of the div and height:auto; secures that it preserves its aspect ratio. Image then fits a div to the max allowed. You can comfortably center the image by setting display:table-cell; vertical-align:middle; text-align:center; to the DIV.
Another solution would be:
background-image:url(' ');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
Check it out here
Using the object-fit CSS property, you can do it without a container:
img {
height: 100vh;
width: 100%;
object-fit: contain;
}
See the browser support.
To do something like your exemple, you can use background-size:cover.
cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
This makes sure that the background image is covering everything. There will be no visible background-color, however depending on the screen's ratio a great part of your image could be cut off
Also see this plunker : https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview
I have an image with the size of 10143x1963. In my CSS I set the height of image on 400px because otherwise the image will take to much space on my website. As you can see by the resolution, the image is very wide because it's a panoramic photograph. I would like to put this image as header on my website with the height of 400px but that the width can change but doesn't get bigger than the other elements on my website. I set the width of the image on 100% using CSS but when I resize my webpage then it squeezes the image together which makes everything on the image not in the right proportion. What I need is that the image gets cut off on the right so it doesn't sqeeuze but is resizeable with the height of 400px. I hope somebody could help me with this.
TL;DR: How to automaticly resize an image with the height of 400 px and the width of 100% but keep the proportions?
wrap your image inside a div with height of 400px and set overflow to hidden. I have set this inside a wrapper with e.g. 80% width. Please check the code snippet in full screen and try resizing window:
.wrapper{
width:80%;
margin-right:5%;
margin-left:5%;
height:400px;
overflow:hidden;
border:1px solid #ff0000;
}
#myimage{height:400px;}
<div class="wrapper">
<img id="myimage" src="http://www.wildnatureimages.com/images%203/San-Diego-Panoramic..jpg">
</div>
I want to add background-image to the div element so it would act like a baclground-image in the body (here is an example http://plnkr.co/edit/gFZZgPmSKMDu3gZEp1H0?p=preview ) - it changes its width and height depending on screen size. And when i add the same code to the div element it does not work.
Example look of how it should work http://thegreatdiscontent.com/
If I'm understanding you correctly, you need to give the div element a percentage width and auto height.
.imageContainer {
width:100%;
height:auto;
}
This will make sure the image retains its ratio as the browser window is resized.
How do we put a large image into a smaller div with h-align/v-align as centre. Image should not be visible outside of the div (kind of overflow:hidden). Also, div will change its size based on page size.
I took help from other question/answer and tried with div background and css - but it is aligning image to h-centre only.
jsFiddle - http://jsfiddle.net/yesprasoon/9tLcV/.
How to align both h-centre and v-centre? Also, there should not be any vertical scrollbar. It should work with any page size and (if possible) any image size. Possible with CSS only?
Not sure if your are OK with resizing the image but you could go with the background-size property
.imageContainer {
background-size:cover;
}
Here is my example: JSFIDDLE
Edit
After your comment I finally understood the problem. You can center the background-image vertically, that works, but but the vertical centering will not adapt when the height of the page changes dynamically. The reason is that your imageContainer div has a fixed height therefore its own height will not change with the page's height.
What you can do to remedy that is give your imageContainer a height of 100%. However you will also need to have the body/html to extend to 100% or your div will have no height in the absence of content, or be too short if you have little content.
JsFiddle doesn't deal well with body/html styles (maybe there's a trick I don't know) so I put my example on codepen.
HTML
<div class="imageContainer" style="background-image: url('http://www.taiwanholidays.com.au/util/image.jsp?l=791');"></div>
CSS
html,body {
width:100%;
height:100%;
margin:0
}
.imageContainer {
margin:0;
height:100%;
width:100%;
overflow:hidden;
background-position:center center;
background-repeat:no-repeat;
}
I need to make a div have a certain height, it has a repeating image in it and I want it to take up the entire screen no matter what the users screen resolution is. Height auto depends on the content so do I need to use javascript in order to achieve my goal? Or can I use something with a "clear:both;" property on it in order to always stretch the div to the bottom? I would really like to avoid javascript.
As long as the parent container (like body or html) has 100% height, then the div should also. So
html, body{
height:100%;
}
div{
height:100%;
width:100%;
border:1px solid red;
}
Example: http://jsfiddle.net/jasongennaro/Jm8Mt/
Of course, your div would have a class... example was just for show
Giving the div 100% height and width will make it take up the entire of the window.
#fullscreen {
height:100%;
width:100%;
}