Resize constantly-changing image to fit size-changing screen, using CSS
I think this layout structure hits all of your requirements. There are three images of varying size in here I took the opacity down so you can see how they all scale together.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
.images {
position: relative;
height: 100%;
}
.image {
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 100%;
opacity: 0.5;
}
.image-container {
position: relative;
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.footer {
background-color: black;
color: white;
height: 50px;
width: 100%;
margin-top: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="images">
<div class="image-container">
<div class="image" style="background-image: url(https://unsplash.it/1000/425)"></div>
<div class="image" style="background-image: url(https://unsplash.it/640/1000)"></div>
<div class="image" style="background-image: url(https://unsplash.it/800/800)"></div>
</div>
</div>
<div class="footer">Content</div>
</div>
</body>
</html>
How to auto adjust the div size for all mobile / tablet display formats?
This is called Responsive Web Development(RWD).
To make page responsive to all device we need to use some basic fundamental such as:-
1. Set the viewport meta tag in head:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
2.Use media queries.
Example:-
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
3. Or we can directly use RWD framework:-
- Bootstrap
- Foundation 3 etc.
Some of good Article
Media Queries for Standard Devices - BY CHRIS COYIER
CSS Media Dimensions
4. Larger Device, Medium Devices & Small Devices media queries. (Work in my Scenarios.)
Below media queries for generic Device type: - Larger Device, Medium Devices & Small Devices.
This is just basic media types which work for all of scenario & easy to handle code instead of using various media queries just need to care of three media type.
/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
/*Style*/
}
/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}
/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}
How to keep a div constant in size as the user zooms in and out on the page?
There is no good way (read: reliable) to do this. Sorry.
What you're asking for basically boils down to detecting the zoom level of the browser, and there's a great answer here (confirming just how difficult this is):
- How to detect page zoom level in all modern browsers?
As stated in that answer, there is a "kinda" cross-browser crazy way involving the use of Flash, but there are downsides:
- It uses Flash.
- It's not reliable if the user loads your page already zoomed in.
- It uses Flash. Yes, this is so bad that I said it twice. Think of all those iPhones/iPads.
Anyway, it's here:
http://blog.sebastian-martens.de/2009/12/how-to-detect-the-browser-zoom-level-change-browser-zoo/
Detecting real time window size changes in Angular 4
To get it on init
public innerWidth: any;
ngOnInit() {
this.innerWidth = window.innerWidth;
}
If you wanna keep it updated on resize:
@HostListener('window:resize', ['$event'])
onResize(event) {
this.innerWidth = window.innerWidth;
}
Making a div appear at the same position regardless of screen size
Use vw (viewport width) instead of percentage. 1vw = 1/100th of the viewport width - regardless of device PPI, etc.
So, if you want the div to remain proportionally fixed regardless of device size and scren resolution - set your horizontal axis position with VW.
Example:
.somediv{ margin-right:20vw}
Related Topics
How to Reset or Override Ie CSS Filters
Wordpress Loop Posts in Bootstrap 3 Grid Layout
How to Colorize a White Png Image with CSS Only
What Is the Benefit of Using Withstyles Over Makestyles
How to Include Common CSS Class in Another CSS Class
How to Color Specific Cells in a Data Frame/Table in R
Reverting CSS Style of <Input Type=Submit Button to Its Default Style
CSS Transform: Scale Does Not Change Dom Size
How to Use the Matrix Transform and Other Transform CSS Properties
CSS Display:Table-Row Does Not Expand When Width Is Set to 100%
Css: Can You Prevent Overflow: Hidden from Cutting-Off the Last Line of Text
How to Position Background Image in Bottom Right Corner? (Css)
Declaring Variable in Javafx CSS File
Bullets Disappear with CSS3 Columns
Font Sizes: Ems VS Pixels... in 2011, Which One Should Be Used