I have a width:100% image as the header of my website, like here:http://directdatanou.comli.com/
How can I make the image scale depending on screen resolution?
I tried using the image as background of a div, like below:
<div id="header" class="latime_100p">
</div>
with css:
#header{
background: #5b6773 url("../grafica/header.jpg") no-repeat top center;
background-size: cover;
height:500px;
}
But it doesn't scale right on big resolutions (it shows only parts of the image as the screen width and height grow).
So I ended up with using the image directly?
How can I make it scale gracefully depending on resolution?
Thank you.
If you need that ALL image is showing:
<img src="...." class="img">
.img {
width: 100%;
height: auto;
}
That's all
Related
Currently I have an image that when the screen shrinks, the image shrinks along with it and scrunches up. I realize this is because I have the image height and width set to percentages:
<div class="container1 overlay">
<img class="fleet" id="hero" src="./images/hero-truck-lg.jpg" alt="Mountain View">
</div>
#hero {
height: 100%;
width: 100%;
margin-left: -35px;
}
However, on the website I'm trying to emulate (https://workwave.com/), the image slides off the screen to the left. Since this is a gradual slide, it does not seem to have been accomplished by media queries. However, I am confused how it is accomplished. How can I replicate the image sliding off the screen gradually like the guy holding the phone in the first panel below the nav on this site? https://workwave.com/
from the site it self
.corp-hp--hero {
position: relative;
background: url(/images/corporate/hero-truck-lg.jpg) no-repeat center center;
background-size: cover;
background-position: 24% 71%;
height: 500px;
}
you can see the image is actually a background for an element NOT an img element, also the position of the background is 24% 71% which means the background will be positioned by a percentage of the view not by a constant value which will give the shifting impression
#home
height: 100%
width: 100%
background-image: url("/lib/img/home.jpg")
background-position: center center
background-repeat: no-repeat
background-attachment: fixed
background-size: cover
Just so you know, I am using SASS for my CSS.
The problem is I want my home landing page to be full screen size and responsive, I have a landscape image which works fine at full screen but at mobile size the height of it does not fit the whole screen. Is there a better solution for this?
img_background {
max-width: 2000px; // maximum width for the backgound pic
min-width: 100px; // for mobile phones in portrait view
position: absolute;
}
This code will be responsive, so when you resize your browser window on PC, it will resize the image to the width of your browser. On mobile devices, the entire image will appear.
I hope this helped!
(EDIT: this is CSS)
You can use bootstrap for doing your elements responsive. This way, the element size will change with the resolution screen:
Use .container for a responsive fixed width container.
<div class = "container">
...
</div>
Or:
<div class = "container-fluid">
...
</div>
Or:
<div class = "container">
...
</div>
Or:
<img class="img-responsive" src="your_image.jpg">
There are more solutions using bootstrap but the basic ones are these.
Check this link for more information:
Bootstrap
#home{
height: 100vh;
width: 100%;
float: left;
background-image: url("/lib/img/home.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
/*Note background attachment fixed not work in mobiles accurately like ios and also on ipads...
USe background attachment scroll for the same...*/
background-size: cover;
}
Image 1 1920X1080:
Image 2 1400X1050:
As you can see from image 1 i design it at resolution 1920X1080 and it look awesome, but when I open it at resolution 1400X1050 it looks so horrible as like in pict 2. Can anyone suggest me the best solution for this case?
Heres my background CSS:
body {
background-image: url(images/background-photo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
background-color:#245528;
}
/* For mobile devices */
#media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
background-size: cover;
}
}
If you want to show images in good way in different resolutions then you need to have different images for different resolutions. You can implement it by using srcset:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
Source: Responsive Images: If you’re just changing resolutions
I think the right style for your case is
background-size: contain;
instead of
background-size: 100% auto;
the contain will always keep the image shown in your container element, so when the width or height is too small for the image, it will try to resize the image, so that the entire image is shown(with possibly blank area on the top/left or bottom/right). Instead, the 100% auto will always try to stretch the image to make it as wide as the screen.
I have few pages where I have included a background image with width 100% and height 100% in every page. That means whenever a page is loaded you'll see an image with 100% screen's size. Everything is perfect when I see these pages in my laptop. I'm facing problems when I view them in mobile screens.
I just want to know how do everyone deal in these situations. I mean how to make changes to my main div with width and height 100% in responsive screens?
The image is getting stretched if I set the background size to 100%.
Some part of the image is cut if I set the background size to contain.
I want the image's clarity should be perfect. Should I make the width of the main div to auto? Or else should I change the image in responsive screens?
Is there anyway to make this div look better in small screens?
I just want my main div to be apt in Responsive screens.
It shouldn't look line there is a defect in the image or in my code.
Here's my code of the main div :
html,
body {
width: 100%;
height: 100%;
}
.main-div {
width: 100%;
height: 100%;
background-image: url('http://vignette4.wikia.nocookie.net/marveldatabase/images/8/8c/Wolverine_Vol_3_73_Variant_Frame_Textless.jpg/revision/latest?cb=20090925123509');
}
<div class="main-div">
</div>
There are many options to make image responsive. Please Google out the approach that best suits your requirement. The solution which you will find helpful depends on the image that you are using. It depends on the size and quality of image.
I find the following links helpful.
https://www.w3schools.com/css/css_rwd_images.asp
https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
For Responsive Image
.class_name{
max-width: 100%,
height: auto,
display:block
}
And Full Screen Responsive Image use individual class like
.class_name{
background-image: url(image path) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
html,
body {
max-width: 2000px;
min-width: 100px;
height: auto;
}
.main-div {
width: 100%;
height: 100%;
background-image: url('http://vignette4.wikia.nocookie.net/marveldatabase/images/8/8c/Wolverine_Vol_3_73_Variant_Frame_Textless.jpg/revision/latest?cb=20090925123509');
}
<div class="main-div">
</div>
this should make it responsive. I don't know what you want the DIV to be like, so I left that alone.
I am moving from a desktop background at 100% and changing to a mobile background once I hit a tablet/mobile size. My problem is as I go down in size, the content starts to exceed the background length.
#bg {
background-image: url('images/bg.gif');
background-size: 100% ;
background-repeat: no-repeat;
position: relative;
height: 100%;
}
Then going to 992px. This image is 992px width and 1425px height
#bg {
background-image: url('images/mobile/mobile-bg.jpg');
background-size: 100% auto;
}
HTML structure
<div class="row main-content" >
<div class="col-xs-12" id="bg">
<div class="row">
<div class="col-xs-12 ">
<div class="row">
<!-- content here -->
</div>
</div>
</div>
</div>
</div> <!-- row main-content end -->
I don't get why it is able to scale and keep the content until it gets smaller (e.g. the mobile size)
What am I missing? I don't want to stretch the image. I want to maintain the right ratio. Do I just need an bg image with even larger height?
I believe you're looking for background-size of either cover or contain. MDN has more on that here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Cover will make the background image as small as possible while maintaining the aspect ratio and contain will make sure the background image is as large as possible while maintaining ratio.
If you need to support IE below version 9, you'll need some sort of a polyfill.
#bg {
background-image: url('images/bg.gif');
background-size: contain;
background-repeat: no-repeat;
position: relative;
height: 100%;
}
I dont quiet exactly get what your your tryin to achieve you may want to look at this
http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/
Chances are this is what you want, as it will scale and crop the picture according to device size.
.bg{
background:url(imgurl/picture.jpg) no-repeat center center;
background-size: cover;
}
This personally what I'd use. Most likely using 3 different appropriate sized images in media queries for phone, large tablet, large desktop. Not because the image wouldn't scale, but to save bandwidth for smaller devices.