I would like my image to be not stretched and no scroll bars. So when the browser window is reduced the image is still the same size (but overflow is hidden).
<img src="http://nybbledesigns.com/images/header.jpg"/>
JsFiddle: http://jsfiddle.net/6ppL9axc/
I found solutions with containers but I need a solution without.
Any idea?
Give this a try:
img {
position: fixed;
overflow: auto;
}
<img src="http://nybbledesigns.com/images/header.jpg"/>
I made a background version, hope it could help.
<div></div>
div {
width:100%;height:60vh;
background-image:url("http://nybbledesigns.com/images/header.jpg");
background-repeat:no-repeat;
}
The vh is relative to the device screen height so 60vh will be 60% relative to the screen height
at all time, no matter which device :)
Try
html, body {
max-width: 100%;
overflow-x: hidden;
}
It will disable the scroll bars forever~
try this
img {max-width:100%;}
This can be done with the new CSS property object-fit (Currently webkit only, but soon to be supported in other browsers)
Just set object-fit: cover; on the img together width a max-width and fixed height.
This is basically the equivalent to to applying background-size:cover to a background image , except that here we apply it to an img element.
FIDDLE
body {
margin: 0;
}
img {
object-fit: cover;
max-width: 100%;
height: 513px;
}
<img src="http://nybbledesigns.com/images/header.jpg" />
Related
I have made two forms on my website, both being surrounded by one <div class="wrapper"> tag. I used CSS to add a background image to this.
.wrapper {
background-image: url(../images/backgrounds/desktop.jpg);
background-size: 100%;
background-position: top;
width: 100%;
height: 100%;
min-width: 950px;
}
However, this is what the site actually looks like. I can't extend the bottom of the image to fill the screen. I can't figure out why it's doing this.
The height of div is 100% of what? If it is a direct child of body, the body is not wrapping 100% of the screen by default. So you have to make body 100% and then the wrapper will also take 100% of body. If there are more parent elements, all of them also should have style height:100% :
html,body{
height:100%;
}
Also add background-size:cover to make sure that the image stretch enough to cover the whole screen.
Add background-size:cover to have the background cover the entire div. Your background will only show behind the content contained within it. You need to change the height or padding of your container and/or add more content to see the whole background.
.wrapper {
background-image: url(../images/backgrounds/desktop.jpg);
background-size: 100%;
background-position: top;
background-size:cover;
width: 100%;
height: 100vh;
min-width: 950px;
}
My solution was to set the height of the <div class="wrapper"> to 100vh.
.wrapper {
height: 100vh;
}
This set the height of the divider to 100% of the window view height. Before it was going to 100% of the height of the forms.
Try replacing
background-image: url(../images/backgrounds/desktop.jpg);
with
background:url(../images/backgrounds/desktop.jpg) no-repeat scroll;
I am trying to put an image in my header and it must auto position it self when the window is resized and the header image must support different screen resolutions.
This is what I have so far:
HTML
<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>
CSS
.thumbnail2 {
display: block;
max-width: 123%;
height: auto;
width: auto;
}
header {
padding: 0px 250px 0px;
margin: 0 auto;
}
The reason my max width is 123% is to fit the image when in full screen but as soon I resize the window it does not resize itself and the image becomes smaller in width.
Please assist.
I understand the thought process behind your current code however, you are approaching the issue all wrong. You should be using a css media query to adjust your your header if you are looking for granular control depending on screen size.
Since you only have one image and have not included the dimensions of the image or where it should appear in the header, i will assume you want it to be the entire width of the header.
Additionally max-width should never be over 100%. Here is how I would restructure your code:
Note: if this does not fix your issue, you need to resize your image to be larger. If your image is to small it will not fill up the entire screen.
Codepen link
html:
<header>
<img class="thumbnail2" src="MyImage.jpg" alt="thumbnail2" />
</header>
CSS:
.thumbnail {
display:block;
/* set width to 100% */
max-width: 100%;
height: auto;
width: auto;
}
header {
/* padding:0px 250px 0px; */
padding-bottom: 250px;
margin: 0;
/* set width of the header to 100% */
width: 100%
}
Try put the image inside the css (not an img tag)
.thumbnail{
background-image : url(MyImage.jpg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
then it would auto adjust to the container .thumbnail width...
You could use JavaScript to dynamically adjust the image size with
the window size:
Auto image resize based on browser window dimensions
You could use Media Queries and select multiple points at which your header adjusts it's size: Resizing images using media queries
You could instead create a "banner" class that utilizes the "backgrounds" family of CSS properties: http://www.w3schools.com/css/css_background.asp
Try changing your code to something like this:
<style>
.thumbnail2 {
position: relative;
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
background-image: url("./path/to/image");
min-height: 100%;
}
</style>
<div class="thumbnail2"></div>
You can edit the height of the image shown with min-height, and the width should be responsive.
I want the image to fill the height of its container and then use object-fit: cover to take care of the aspect ratio. In Chrome this achieves the desired effect. However, in Safari the containing divs are now very tall.
http://codepen.io/anon/pen/GjzPvN
Why is there a discrepancy between Chrome and Safari? Which one is correct and if Safari is correct, is there a better way to achieve this, preferably without using position: absolute?
Safari does it correctly, because of the wrong support for min-height by Chrome.
If you need consistency, you must use vh, this way:
img {
width: 100%;
min-height: 100vh;
object-fit: cover;
}
I wouldn't use object-fit: to do what you need because of its browser support
For the best browser support, you could use instead of an image, a background-image like this:
.row
.medium-8.columns
a.link#image-1 href="" # I use and id to manage the background image but you could use a class or even inline style (not suggested)
.medium-4.columns
a.link#image-2 href=""
And your css:
/* I fix the container height to fit the 100% of the page */
html, body, .row, .row > div {
height: 100%;
}
/* If you want a fixed height you could add it here and remove the style above. */
[id^="image-"] {
background-size: cover; /* This could be "cover" or "100% 100%"
The difference is that the second distor the image to make it fit.*/
background-position: center;
}
#image-2 { background-image: url(http://placehold.it/300x150); }
#image-1 { background-image: url(http://placehold.it/400x300); }
Here is my CodePen example.
Please notice that If you want to get exactlye the same result as your CodePen, you should change background-size to 100% 100% but if you want the image to maintain it's aspect ratio you should consider using cover or contain. Read more about the differences between cover and contain here
It seems Chrome calculates the row height according to the highest image. Safari does not calculate the row height according to the images.
Even if you set a fixed column height, the behavior of Safari 9.x and Chrome is not the same. The left img is showing outside its container in Safari. To make the browser behave the same, I had to set a height and make overflow-y hidden.
Example:
.columns {
padding-left: .9375rem;
padding-right: .9375rem;
min-width: initial;
background: blue;
height: 405 px;
overflow-y: hidden;
}
Instead of overflow hidden. You can try:
.columns {
padding-left: .9375rem;
padding-right: .9375rem;
min-width: initial;
background: blue;
height: 405px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
Maybe you can set the height of the columns according to the highest of the two images using some jQuery. Or set the height using #media rules.
Microsoft browsers does not support object-fit: - Including IE11 and EDGE. For browsers not supporting object-fit:, you can try object-fit-polyfill
If anyone is having this issue with a variable height wrapper and Safari this seemed to work for me:
.imgContainer {
width: 50%;
max-height: 100%; // for safari
}
.imgContainer > img {
object-fit: cover;
min-height: 100%; // for safari
}
When user's device width is more than 480px I'll show him original GIF as a background of my site.
My HTML:
<img class="background" src="assets/img/960XAUTO.gif" alt="Pink Smoke Background">
My CSS:
.background {
display: block;
height: 100%;
margin: 0 auto;
}
When user's device width is less than 480px I increased my GIF's width to 200%, because without increasing the smoke looks very commpessed and skinny:
So, I do this in my CSS:
#media screen and (max-width: $breakpoint) {
.background {
position: absolute;
left: -50%;
max-width: 200%;
}
}
And here is a problem. As my GIF is increased in 2 times, I get horizontal scrollbar. Just look:
I really need to increase GIF, so that the smoke looks more widely. How can I remove empty place on the right side, which was created by GIF? Or maybe there is some other way to increase GIF's width? I tried to use overflow in the different ways. Also I tried to set body width 100% of device screen.
Add this to your CSS, referring to the element you need (it should be the entire html or body like in this example, if this is your entire site background, btw):
html, body {
overflow-x: hidden;
}
Add background-attachment:fixed; in your style
code exact :
.background {
display: block;
background-attachment:fixed;
height: 100%;
margin: 0 auto;
}
You should try using background center with optional scaling percentages.
The full edit is here https://plnkr.co/edit/wZZqiC3awyEzHLPpxYBI
.bg{
width: 100%;
height: 100%;
background: no-repeat center/80% url("http://m.gdz4you.com/sandra/assets/img/960XAUTO.gif");
background-size: cover;
}
and ofcourse just drop a div
<div class="bg"></div>
I'm trying to stretch an Image Full Screen (Cover): http://www.bootply.com/114850
I have a simple Menu and a call to action button but the image covers only the menu and stops there.
The Section Style is below.
.section-1 {
min-height: 100%;
background-image: url(http://i.imgur.com/fGrTemz.jpg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
overflow: auto;
}
What am i missing?
Add
html, body {
height:100%;
}
section-1 is stretching to the height of its parent (html/body) which doesn't have a height set on so it doesn't know what height to be.
Change your min-height from percentage to pixels.
.section-1{
min-height:500px;
}
Percentage height is dependent on the height of the parent, so you need to "pass" the height in percentage to the targeted element.
html, body {
height: 100%;
}
Demo: http://www.bootply.com/114867
Yo specified position:absolute in your .content-holder so that it was removed from the content flow. As a result, its container <section> shrink its height to fit the <nav> element only.
Try remove position:absolute from .content-holder. And if you add position:absolute to .section-1, the background will be fullscreen.
Add the following to you css:
position: Absolute
so your css would be
.section-1 {
min-height: 100%;
position: absolute;
background-image: url(http://i.imgur.com/fGrTemz.jpg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
overflow: auto;
}
if you add width:auto; to the section class. then just play around with the section-1 class min-height in "px" to target the screen size that best suits you. essentially what you could do is use media queries to target different screen sizes that way you will always get the perfect size. but thats alot of work so use the
html, body{height: 100%;}