I am trying to add a fixed element to the bottom right corner of my webpage, which I have done with success.
I have also limited it's width with max-width: 30%; so in mobile devices it does not show the image too big. What I want to do now is to adjust the image by screen height as well. Is there anything else to figure this out except for Media Queries?
HTML:
<div id="cornerImg">
<a href="my-site-link-here">
<img src="image/source.jpg" />
</a>
</div>
CSS:
#cornerImg {
position: fixed;
bottom: 0;
right: 0;
max-width: 30%; /* Already working as expected */
max-height: 30%; /* Adjusts the visible part of the image, but overflowing */
}
So I get the image resized on the screen, but it does not actually change the size of the image when it goes under the max-height condition. It just shows the top of the image and leaves the rest of the image invisible.
I know how to make this as Media Query, but I am seeking for a non-MQ solution here, if it is possible in any form. Thank you in advance!
EDIT: If any Media Query solutions come up, please provide some advice on that as well. It seems that even though I can adjust the height of the image in there by max-height, it still overflows the image out from the screen, so no luck on that side either.
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
You can try this
Related
Struggled for a solution the first time so I am posting again with more info. Thanks in advance for your feedback.
On the website I am building at the moment I have 2 background images set to 2 different divs but they need to line up perfectly on all devices.
At the moment the background images line up at 1920px wide and smaller but once you start going larger than that it starts shifting.
Please could someone help?
Please see an image here that it should resemble
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center;
min-height: 895px;
background-size: auto 100%, cover;
}
.mc-key-points {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center;
min-height: 895px;
background-size: auto 100%, cover;
}
#media only screen and (min-width: 1921px) {
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center center;
min-height: 895px;
background-size: cover;
}
.mc-key-points {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center center;
min-height: 895px;
background-size: cover;
}
}
#media only screen and (max-width: 1200px) {
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image-mobile.jpg") no-repeat center center;
background-size: cover;
}
.mc-key-points {
background: none;
}
}
<div class="productTopSection g-py-200">
<!-- Content Goes Here -->
</div>
<div class="mc-key-points g-py-200">
<!-- Content Goes Here -->
</div>
#media only screen and (max-width: 767px)
.productTopSection {
background-size: cover;
height: 200px;
min-height: auto;
}
since then there is no content i think the above is the way.correct me if i'm wrong
Your example does not work, well, it doesn't matter, I'll try to understand you
First he trumpets to understand how it works
The blue frame is your div in full screen mode (one element for the whole page)
since the div has no height, you give it a min-height or fixed height (height property) in your case it works the same with only a background and until you put something in the div
At this stage, you need to understand that the height you specify does not affect the height of the image itself, that is, the min-height will not change until you put a lot of text in it (this is just an example, you can put whatever you want that has a height)
In the image I have demonstrated the background-size property with 100% auto value.
from the documentation we see that we set 100% width and leave the height on auto also by default the bakcground-image has the same position (background-poistion: 0% 0%)
If you write it all like this:
background-size: 100% auto;
background-position: 0 0; // this is not required as this is the default, I am just using this as an example
we will get the result as in the picture above, where the picture will be stretched in width relative to the screen
well now we reduce the width of screen (div automatically starts changing width and taking the width of the screen)
what do we see? there is an empty space below! In your case you set the height to 100% and the width automatically
background-size: auto 100%;
and yes, you shouldn't use multiple background image syntax in your case
background-size: auto 100%, cover; // you have one background image
This is what your non-working result looks like:
Note that I can see that you are using center positioning, so you have two holes! With what I congratulate you!
What should you do? You must use an image (html img tag) instead of a background
Example:
<img aria-hidden="true" class="bg-fix" src="https://i.picsum.photos/id/767/1200/800.jpg?hmac=lGBpi_Bt_UPPi17TX-TUBQitEe14QlbeSJ-GYhwZBvw" alt="">
<style>
img {
display: block; // Remove inline native space
width: 100%;
}
</style>
or use media to control the div's height (use vh instead of pixels or css media queries)
<style>
div {
/*.....*/
-webkit-background-size: 100% auto;
background-size: 100% auto;
min-height: 60vh;
}
/* OR */
div {
/*....*/
min-height: 875px;
}
#media screen and (max-width: 1024px) {
div {
min-height: 500px;
}
}
</style>
While it's not clear to me if you were planning to crop the image sides on mobile, I think this may help out at least - for something like this I think you can make it much easier by using an <img> tag in HTML instead of background-image in CSS.
The problem is getting the height to scale proportionally to the width so that the images retain their aspect ratio. What's happening in your code is the height is effectively being set to 895px with the min-height, it will not go higher unless you add enough content to the div.
So starting with mobile screens, your height is still 895px and the sides of the images will be cropped less and less until you reach 1920px in width (the image width). Once you go over this the image will start to stretch wider to cover and the top/bottom will start to be cropped. That top/bottom cropping while the images are centered is what causing the edges in the image to not line up. Because you're now lining up say 20% up on the top image to 20% down on the bottom one when you planned for 0% to line up.
So how does the <img> tag make this easier?
It adds content width/height to your container and allows the container to expand to fit the content, or force the content to shrink to fit in it. if you just throw an img in a div you'll see it expands the div out to the dimensions of the img.
But if you set the width to 100% on both the container and the img, it will fill the width of the container. The key being that the height will be proportionally set to maintain the aspect ratio and the div will expand in height to fit the img height needed and you will not have any top/bottom cropping so edges will line up.
Then you just need an absolute positioned container over the img to put your text content wherever you want.
If you were trying to crop the image sizes on small screens (which I think would look better). I'd suggest you use media queries there just to set some breakpoints where maybe the image is 120% width on phones and center - you'll still have that height though so if it's too high and you need to crop to bring the height down, I do have an idea for that but don't want to scope creep too much...
Here's an example with <img> - much less going on here and more straightforward IMO. And you gain more control - you can tweak this a lot to crop however you want at different media queries.
.productTopSection, .mc-key-points {
position: relative;
width: 100%;
}
.responsive-img {
width: 100%;
}
.overlay-content {
position: absolute;
/* just to get started with the content positioning */
top: 50%;
transform: translateY(-50%)
}
<div class="productTopSection g-py-200">
<img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg">
<div class="overlay-content">
Content Goes Here!
</div>
</div>
<div class="mc-key-points g-py-200">
<img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg">
<div class="overlay-content">
Content Goes Here!
</div>
</div>
I'm making a few HTML pages specifically for iPad Air and iPad Mini. The pages will have few larges images, for example of the size of 1600x300. But as per the code which was written by me the images are too big to be on the screen, it goes beyond the screen while testing in Windows browsers. Code as shown below:
<div class="wrapper">
<div class="image1"></div>
<div class="image2"></div>
</div>
.wrapper {
width: 100%;
height: 100%
}
.image1 {
width: 1600px;
height: 300px;
top: 100px;
left: 100px
}
.image2 {
width: 1700px;
height: 300px;
top: 450px;
left: 100px
}
The width and height of div are set the same as width and height of the image. The images size were specifically designed for iPad, I can't change the size.
If I give the actual resolution of iPad for .wrapper as shown below the images will get positioned correctly when I test I the browser setting the screen size to 1024x768 (logical resolution of iPad).
.wrapper {
width: 2048px;
height: 1536px
}
I want the image to adapt to all screen as well as iPad by giving 100% width and height to wrapper class so that even in the portrait mode of iPad I can view it without any fluctuations. Please tell me how to achieve this.
Thanks
OP hasn't clarified why they're using DIVs. Maybe there's going to be content laid over it? Until OP provides clarification I'm going to provide the standard responsive image solution.
If you don't have to use DIVs, try this:
<img src="http://placehold.it/1600x300">
<img src="http://placehold.it/1600x300">
img {
display: block;
max-width: 100%;
}
jsFiddle: http://jsfiddle.net/rwzn2db6/
UPDATE
Note: I cannot tell if you're also looking for a 100% height option or just need the widths to be a 100% width and scale.
If you'd like to use DIVs you could use background-size: cover along with the appropriate amount of padding-bottom for each image DIV. The padding on the bottom of the DIV is based on the image's height to width ratio expressed as a percentage.
<div class="container">
<div class="img-1"></div>
<div class="img-2"></div>
</div>
.container > div {
background-size: contain;
}
.img-1 {
background: url('http://placehold.it/1600x300/') no-repeat;
padding-bottom: 18.75%; /* 300/1600 * 100 = 18.75 */
}
.img-2 {
background: url('http://placehold.it/1600x300') no-repeat;
padding-bottom: 25%; /* 400/1600 * 100 = 25 */
}
jsFiddle: http://jsfiddle.net/5kjtdhmn/
Either of the solutions offered above may not be a 100% what you're looking for as it is hard to tell what the proper context and final objective is.
Add max-width: 100% and height:auto to your images
May be you need to adjust size (width-height) of pages according to the device, so you might need the following tag added to your section of your HTML.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
......
......
content="width=device-width" will adjust screen resolution automatically'initial-scale' value used to set zoom level of page.
First of all, what's with people saying stuff isn't an answer? Expecially when it is? Wtf.
Second of all, another acceptable answer on top of what was already said by DigitalDouble, would be to set the image to have the
Background-size:cover; and set the image with css background-image property.
I would remove the pixel sizes entierly and just set it to 100% width and height, with position Absolute to be able to lay other content on top of it.
My last question in terms of CSS was this one:
Website background responsive
it was about a responsive background and i got this one fixed after a long research. I tryed to use some of what i learned and got it nearly working as good as i wanted but(!) i messed something up.
<style type="text/css">
.logo {
display: block;
text-align: center;
margin-top:40px;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
<img src="https://www.google.com.tw/images/srpr/logo11w.png" class="logo"/>
just to keep it simple i put both together. As you may not see in a fiddle or something like this. It is working somehow fine in lower resolutions but if i screenshot it on my 1920x1080 screen and just check the left to the logo and right to the logo difference in photoshop i can clearly see that the difference from the right border to the logo is larger than from the opposite site.
I realy appreciate some ideas!
A combination of max-width: x% and max-height: x% keeps the image in the correct proportions when resizing (Keep the percentage size the same for both).
Making the image display: table allows the flexible width image to be centered with margin: 0 auto
In this example, the image is 400px x 400px with a max-width / max-height set at 40%. This is just to make the re-size obvious for the demo. Open it full screen and re-size the window to see the shrink.
CSS / HTML / Demo
.logo {
display: table;
margin: 40px auto 0;
max-width: 40%;
max-height: 40%;
}
<img class="logo" src="http://www.placehold.it/400">
I'm stuck on something that should be very simple. I have a page that uses Semantic UI. On that page I have a logo image that is 200px wide by 388px high. The image is positioned absolutely, top left. It does not use any Semantic UI class. I want the image to shrink adaptively to the screen size. I have played about with min and max heights and widths, but the image will not change size at all.
The only way I got it to almost work was to replace the image with a div and set the image as a background. I got that adapting, but I couldn't maintain aspect ratio, and besides, that's not a satisfactory solution.
Here's an example of what I have;
<div class="ui inverted menu">....</div>
<img src="/img.png" class="logo">
<div class="ui page grid">.....</div>
/* css (separate file) */
.logo{
position: absolute;
top: 4px;
left: 6px;
z-index: 2;
min-height: 100px;
max-height: 388px;
width: auto;
}
This is just one of many variants I have tried and I have run out of ideas!
The best solution will be to put the image as a background-image and than set the background-size to cover.
.logo {
background-image: url(path/to/your/image.jpg);
background-size: cover;
}
This way, you'll maintain aspect ratio.
If you don't want parts of your image to be cut off, you can use background-size: contain; instead.
There is an object-fit/object-position method for your problem.
To keep aspect ratio for an img block just use:
object-fit: contain;
For placing img top left:
object-position: 0 0;
Don't forget to stretch image to 100% width and height:
width: 100%;
height: 100%;
Check out fiddle to play with it.
Please notice that this variant is not the best for cross-browser using, since there is no support for object-fit/object-position properties in IE 6-11, Edge and some Mobile Android browsers according to caniuse.
As Simon said before, I'd reccomend you using background-image for cases like this too.
I'd like to set a webpage background image to scale with the browser window so that it never loses its original aspect ratio (becomes stretched), and so that the image itself stays basically centered. After the window reaches a small enough size, I want the image to overflow (disappear) on both the left and right sides, not just the right side, as it does by default if the image is absolutely positioned.
Here is an example of what I'm doing right now: http://jsfiddle.net/S59EW/2/
#background img {
position: absolute;
min-height:100%;
width: 100%;
height: auto;
top: 0;
left: 0;
}
(The image has to be within a div positioned absolutely because of some javascript I'm using that applies to it.)
If you resize the jsfiddle window you'll see that the image keeps its aspect ratio only if you don't make the window too tall. Then the image is stretched vertically.
And if you remove "height: auto" you get the same thing except the image stops resizing after a certain point and disappears on the right/bottom sides but not on the top/left sides.
#background img {
position: absolute;
min-height:100%;
width: 100%;
top: 0;
left: 0;
}
So, I need:
The background image to always occupy the entire window without scrollbars.
The image to always keep aspect ratio.
The image to overflow onto the left and right side after a certain browser size threshold, so that it remains basically centered.
Thanks everyone
You can set the div background through the CSS, that way the image will fill the div and the sides will cutoff when the div is resized smaller. This code will center the image within the div and cutoff at the edges when shrunken down:
HTML:
<div id="background"></div>
CSS:
#background {
position: absolute;
min-height:100%;
width: 100%;
height: auto;
top: 0;
left: 0;
background: url(http://2.bp.blogspot.com/-ayEwJpMGTPQ/USqliwPWo1I/AAAAAAAAHtI/ab6NHVy0Q48/s1600/tree.jpg) no-repeat center center;
-webkit-background-size: cover; /* Add in these */
-moz-background-size: cover; /* four lines to */
-o-background-size: cover; /* remove the white space*/
background-size: cover; /* around images */
}
JSFiddle
and full screen JSFiddle
Updated JSFiddle with background-size property included to remove white space
Updated full screen version
Updated with slideshow
Updated fullscreen with slideshow
You may need to play with the aspect ratio of the background photos in order to get the look you want.
I have these two options, one is CSS only but it would need media queries at a small width.
Here is the background image JSFIDDLE, in this one it will scale exactly how you want it.
Finally, drum roll please, if you need the image to be a tag its self and act this way well there is a FIDDLE for that. :p
First CSS,
#background img {
position: absolute;
min-height:100%;
width: 100%;
height: auto;
margin-top: -40%;
top: 50%;
left: 0;
}
#media only screen and (max-width: 1700px) {
#background img {
margin-top: 0;
top: 0;
}
}