I made basic website using ChatGPT. Could I possibly add a button that will save 9:16 1080x1920 image of image that you can see on "website"?
Image 1 is preview of site when i upload image that you can see in Image 3 resolute should look like Image 2 Simple as that, yeah i know i can screnshot, but i wanna make it simple and keep aspect ratio
<!DOCTYPE html>
<html>
<head>
<title>IMG to IG</title>
<style>
/* Style for the image container */
.image-container {
right: 8px;
width: 1080px; /* Set width to HD+ */
height: 1920px; /* Set height to HD+ */
display: flex;
justify-content: center; /* Center the images horizontally */
align-items: center;
height: 100vh; /*Set the container height to the full viewport height */
position: relative; /* Set position to relative for absolute positioning of images */
pointer-events: none;
}
/* Style for the blurred image - Image in Background */
.image-container .blurred-image {
width: 1080px; /* Set width to HD+ */
height: 1920px; /* Set height to HD+ */
object-fit: cover; /* Scale image to desired aspect ratio by occupies all the available space */
filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='4' result='b'/%3E%3CfeMorphology operator='dilate' radius='4'/%3E %3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E %3C/svg%3E#a");
pointer-events: none;
}
/* Style for the original image - Image in center */
.image-container .original-image {
width: 80%;
position: absolute; /* Position the image absolutely */
top: 50%; /* Position from the top */
left: 50%; /* Position from the left */
transform: translate(-50%, -50%); /* Center the image */
filter: drop-shadow(15px 15px 8px rgba(0, 0, 0, 0.6)) ;
pointer-events: none;
}
</style>
<body>
<input id="upload" type="file" accept="image/*" onchange="loadImage(event)">
<div class="image-container">
<img id="blurredImage" class="blurred-image blur-effect" >
<img id="originalImage" class="original-image">
</div>
<script>
// Function to load the selected image
function loadImage(event) {
var originalImage = document.getElementById("originalImage");
var blurredImage = document.getElementById("blurredImage");
var reader = new FileReader();
reader.onload = function(){
originalImage.src = reader.result;
blurredImage.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}
</script>
</body>
</html>
Edited code with HTML2Canvas here I used this script as it was recommended by #Parking Master. It works somehow but it makes screenshot of the full website, not just div with id "image-container" and in preview, back layer is blurred that is not being downloaded but drop-shadow seems like it is. Can someone help
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Title -->
<title>IMG to IG</title>
<!-- Download and Include -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
/* Style for the image container */
.image-container {
right: 8px;
width: 1080px; /* Set width to HD+ */
height: 1920px; /* Set height to HD+ */
display: flex;
justify-content: center; /* Center the images horizontally */
align-items: center;
height: 100vh; /*Set the container height to the full viewport height */
position: relative; /* Set position to relative for absolute positioning of images */
pointer-events: none;
}
/* Style for the blurred image - Image in Background */
.image-container .blurred-image {
width: 1080px; /* Set width to HD+ */
height: 1920px; /* Set height to HD+ */
object-fit: cover; /* Scale image to desired aspect ratio by occupies all the available space */
filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='4' result='b'/%3E%3CfeMorphology operator='dilate' radius='4'/%3E %3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E %3C/svg%3E#a");
pointer-events: none;
}
/* Style for the original image - Image in center */
.image-container .original-image {
width: 80%;
position: absolute; /* Position the image absolutely */
top: 50%; /* Position from the top */
left: 50%; /* Position from the left */
transform: translate(-50%, -50%); /* Center the image */
filter: drop-shadow(15px 15px 8px rgba(0, 0, 0, 0.6)) ;
pointer-events: none;
}
</style>
</head>
<body>
<input id="upload" type="file" accept="image/*" onchange="loadImage(event)">
<div class="image-container" id='image-container'>
<img id="blurredImage" class="blurred-image blur-effect" >
<img id="originalImage" class="original-image">
</div>
<div id="download">
<a id="download-link" download="screenshot.png">Download Screenshot</a>
</div>
<input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
<script>
// Function to load the selected image
function loadImage(event) {
var originalImage = document.getElementById("originalImage");
var blurredImage = document.getElementById("blurredImage");
var reader = new FileReader();
reader.onload = function(){
originalImage.src = reader.result;
blurredImage.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}
// Script for screenshot
function screenshot(){
html2canvas(document.getElementById("image-container")).then(canvas => {
document.body.appendChild(canvas);
var downloadLink = document.querySelector('#download-link');
downloadLink.href = canvas.toDataURL("image/png");
downloadLink.style.display = 'inline';
});
}
</script>
</body>
</html>
HTML2Canvas will take a screenshot of the selected element you want.
In this case #image-container, but you’ve put a class .image-container and an ID #image-container on the same element, so when selecting #image-container it will return null because the class is already in use.
By default, the html2canvas will use the body as the default if there is no argument for the element or it is null, so this is why it is taking a screenshot of the entire page.
To fix this, simply remove the class .image-container or change it to an ID or select it by its class.
Here’s the second script changed to work now:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Title -->
<title>IMG to IG</title>
<!-- Download and Include -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
/* Style for the image container */
.image-container {
right: 8px;
width: 1080px; /* Set width to HD+ */
height: 1920px; /* Set height to HD+ */
display: flex;
justify-content: center; /* Center the images horizontally */
align-items: center;
height: 100vh; /*Set the container height to the full viewport height */
position: relative; /* Set position to relative for absolute positioning of images */
pointer-events: none;
}
/* Style for the blurred image - Image in Background */
.image-container .blurred-image {
width: 1080px; /* Set width to HD+ */
height: 1920px; /* Set height to HD+ */
object-fit: cover; /* Scale image to desired aspect ratio by occupies all the available space */
filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='4' result='b'/%3E%3CfeMorphology operator='dilate' radius='4'/%3E %3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E %3C/svg%3E#a");
pointer-events: none;
}
/* Style for the original image - Image in center */
.image-container .original-image {
width: 80%;
position: absolute; /* Position the image absolutely */
top: 50%; /* Position from the top */
left: 50%; /* Position from the left */
transform: translate(-50%, -50%); /* Center the image */
filter: drop-shadow(15px 15px 8px rgba(0, 0, 0, 0.6));
pointer-events: none;
}
</style>
</head>
<body>
<input id="upload" type="file" accept="image/*" onchange="loadImage(event)">
<div class="image-container">
<img id="blurredImage" class="blurred-image blur-effect" >
<img id="originalImage" class="original-image">
</div>
<div id="download">
<a id="download-link" download="screenshot.png">Download Screenshot</a>
</div>
<input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
<script>
// Function to load the selected image
function loadImage(event) {
var originalImage = document.getElementById("originalImage");
var blurredImage = document.getElementById("blurredImage");
var reader = new FileReader();
reader.onload = function() {
originalImage.src = reader.result;
blurredImage.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}
// Script for screenshot
function screenshot() {
html2canvas(document.querySelector(".image-container")).then(canvas => {
document.body.appendChild(canvas);
var downloadLink = document.querySelector('#download-link');
downloadLink.href = canvas.toDataURL("image/png");
downloadLink.style.display = 'inline';
});
}
</script>
</body>
</html>
Related
The page in portrait looks good, but in landscape, the main element is cut off a bit at the top and only scrolls down.
This is the page in landscape mode.
Below is snippet of the CSS code for the body and main elements.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 1440px;
max-width: 1440px;
font-family: 'Red Hat Display', sans-serif;
font-size: 100%;
background-color: hsl(225, 100%, 94%);
background-image: url(/images/pattern-background-desktop.svg);
background-size: cover;
background-repeat: no-repeat;
width: 100%;
}
main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 667px;
}
The way to avoid this problem is to use object-fit from CSS properties. You can use the Mobile-Detect JavaScript library to change the element's style sheet by detecting whether the mobile device is horizontal or vertical.
if( $detect->isMobile() && !$detect->isTablet() )
{
/* Apply style properties for mobile devices */
} elseif ( $detect->isTablet() ) {
/* Apply style properties for tablet devices */
} else {
/* Apply style properties for desktop devices */
}
Add the following style jQuery to the <img> element and/or other elements to crop the image and keep the aspect ratio:
<img id="resizeImage" style="width: 300px; height: 400px; object-fit: scale-down;"/>
I've looked into this a fair bit but can't seem to find a good, solid answer to find how to make a responsive circle around a div element of variable height.
It's easy to make a simple responsive circle using vw units.
<div style="height:20vw; width:20vw"></div>
However, I'm looking to use a min-height of an element and have a circle around this div.
Another way to create a responsive circle is using something like the snippet below, but again I can't adapt this to work for a variable height (again, I can't use vh units as the div will change in height.
.square {
position: relative;
width: 10%;
background: gray;
border-radius: 50%;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="square">
<div class="content">
</div>
</div>
I am trying to create something like the below, where the circle will never cut into the corners of the div (with around a 10px padding). I personally was trying to avoid javascript and would have preferred a css only approach, but it seems it's unavoidable. Maybe the only solution is to use a jquery to calculate the height of the element in order to apply this to a wrapper element?
I was playing around with this:
.square {
position: absolute;
top: 50%;
display: inline-block;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
<div class="square">
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
</div>
Clip-path can easily do this if you consider solid coloration.
Resize the element and the circle will follow:
.box {
width: 200px;
height: 200px;
overflow: hidden;
resize: both;
background: blue;
box-shadow: 0 0 0 200vmax red;
clip-path: circle(71%);
margin: 100px auto;
}
<div class="box"></div>
Related question to understand the magic number 71%: clip-path:circle() radius doesn't seem to be calculated correctly
To use an image we can consider pseudo elements. You can also rely on calc() to add the offset:
.box {
width: 200px;=
resize: both;
clip-path: circle(calc(71% + 10px));
margin: 100px auto;
position: relative;
font-size:35px;
color:#fff;
}
/* the background layer */
.box::before {
content:"";
position: absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:blue;
}
/* the image layer */
.box::after {
content:"";
position: fixed; /* to make sure the image cover all the screen */
z-index:-2;
top:0;
bottom:0;
left:0;
right:0;
background:url(https://picsum.photos/id/1015/1000/1000) center/cover no-repeat;
}
<div class="box" contenteditable="true"> Edit this<br>text </div>
I tried my hardest to figure this out with pure css. Though the problem with css I could not figure out how to calculate the diameter of the circle based on the content div size; the length from top left corner to bottom right corner of the variable height div.
I'm not sure if can be done using the calc() css function.
But I did manage to do it with a little jquery (which could easily be changed to pure javascript if you are not using jquery).
See working resizable example below (follow my comments in code)
Note: If you are using internet explorer the resizable demo content div will not resize.
// circumscriber for variable size divs
function circumscriber() {
// for each variable size div on page
$(".variable-size").each(function() {
// get the variable size div content width and height
let width = $(this).outerWidth();
let height = $(this).outerHeight();
// get the diameter for our pefect circle based on content size
let diameter = Math.sqrt(width ** 2 + height ** 2);
// extra 15 pixel circle edge around variable size div
let edge = 15;
// add current circle size width css
$('.circle', this).css({
'width': (diameter + (edge * 2)) + 'px'
})
});
}
// run the circumscriber (you might wana do this on ready)
circumscriber();
// if the window is resized responsively
$(window).on('resize', function() {
circumscriber();
});
// for demo purpose to fire circumscriber when resizing content
// not needed for real thing
$('.content').on('input', function() {
this.style.height = "";
this.style.height = ( this.scrollHeight - 30 ) + "px";
circumscriber();
}).on('mouseup', function() {
circumscriber();
});
/* variable size container to be circumscribed by circle */
/* none of these styles are required, this just to center the variable size div in the window for demo purposes */
.variable-size {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* resizable text area for demo */
/* again not needed */
.variable-size .content {
padding: 15px;
background: #fff;
resize: both;
overflow: auto;
color: #000;
border: none;
width: 200px;
font-weight: bold;
}
.variable-size .content:focus {
outline: 0;
}
/* child circle div css */
.variable-size .circle {
position: absolute;
background-image: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-position: center center;
z-index: -1;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease;
width: 0;
}
/* fast way to make circle height the same as current width */
.variable-size .circle:before {
display: block;
content: '';
width: 100%;
padding-top: 100%;
}
/* demo window css */
HTML,
BODY {
height: 100%;
min-height: 100%;
background: black;
position: relative;
font-family: "Lucida Console", Courier, monospace;
}
<div class="variable-size">
<textarea class="content" rows="1" placeholder="TYPE TEXT OR RESIZE ME ↘"></textarea>
<div class="circle"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
See jsfiddle here... https://jsfiddle.net/joshmoto/6d0zs7uq/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
Source: https://www.w3schools.com/
You could use flex display and insert empty flex-items around the inner div and use flex-basis to fix their width.
Try this
.square {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: black;
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
.emptyDiv {
flex-basis: 120px
}
<div class="square">
<div class="emptyDiv"></div>
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
<div class="emptyDiv"></div>
</div>
I've looked into this a fair bit but can't seem to find a good, solid answer to find how to make a responsive circle around a div element of variable height.
It's easy to make a simple responsive circle using vw units.
<div style="height:20vw; width:20vw"></div>
However, I'm looking to use a min-height of an element and have a circle around this div.
Another way to create a responsive circle is using something like the snippet below, but again I can't adapt this to work for a variable height (again, I can't use vh units as the div will change in height.
.square {
position: relative;
width: 10%;
background: gray;
border-radius: 50%;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="square">
<div class="content">
</div>
</div>
I am trying to create something like the below, where the circle will never cut into the corners of the div (with around a 10px padding). I personally was trying to avoid javascript and would have preferred a css only approach, but it seems it's unavoidable. Maybe the only solution is to use a jquery to calculate the height of the element in order to apply this to a wrapper element?
I was playing around with this:
.square {
position: absolute;
top: 50%;
display: inline-block;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
<div class="square">
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
</div>
Clip-path can easily do this if you consider solid coloration.
Resize the element and the circle will follow:
.box {
width: 200px;
height: 200px;
overflow: hidden;
resize: both;
background: blue;
box-shadow: 0 0 0 200vmax red;
clip-path: circle(71%);
margin: 100px auto;
}
<div class="box"></div>
Related question to understand the magic number 71%: clip-path:circle() radius doesn't seem to be calculated correctly
To use an image we can consider pseudo elements. You can also rely on calc() to add the offset:
.box {
width: 200px;=
resize: both;
clip-path: circle(calc(71% + 10px));
margin: 100px auto;
position: relative;
font-size:35px;
color:#fff;
}
/* the background layer */
.box::before {
content:"";
position: absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:blue;
}
/* the image layer */
.box::after {
content:"";
position: fixed; /* to make sure the image cover all the screen */
z-index:-2;
top:0;
bottom:0;
left:0;
right:0;
background:url(https://picsum.photos/id/1015/1000/1000) center/cover no-repeat;
}
<div class="box" contenteditable="true"> Edit this<br>text </div>
I tried my hardest to figure this out with pure css. Though the problem with css I could not figure out how to calculate the diameter of the circle based on the content div size; the length from top left corner to bottom right corner of the variable height div.
I'm not sure if can be done using the calc() css function.
But I did manage to do it with a little jquery (which could easily be changed to pure javascript if you are not using jquery).
See working resizable example below (follow my comments in code)
Note: If you are using internet explorer the resizable demo content div will not resize.
// circumscriber for variable size divs
function circumscriber() {
// for each variable size div on page
$(".variable-size").each(function() {
// get the variable size div content width and height
let width = $(this).outerWidth();
let height = $(this).outerHeight();
// get the diameter for our pefect circle based on content size
let diameter = Math.sqrt(width ** 2 + height ** 2);
// extra 15 pixel circle edge around variable size div
let edge = 15;
// add current circle size width css
$('.circle', this).css({
'width': (diameter + (edge * 2)) + 'px'
})
});
}
// run the circumscriber (you might wana do this on ready)
circumscriber();
// if the window is resized responsively
$(window).on('resize', function() {
circumscriber();
});
// for demo purpose to fire circumscriber when resizing content
// not needed for real thing
$('.content').on('input', function() {
this.style.height = "";
this.style.height = ( this.scrollHeight - 30 ) + "px";
circumscriber();
}).on('mouseup', function() {
circumscriber();
});
/* variable size container to be circumscribed by circle */
/* none of these styles are required, this just to center the variable size div in the window for demo purposes */
.variable-size {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* resizable text area for demo */
/* again not needed */
.variable-size .content {
padding: 15px;
background: #fff;
resize: both;
overflow: auto;
color: #000;
border: none;
width: 200px;
font-weight: bold;
}
.variable-size .content:focus {
outline: 0;
}
/* child circle div css */
.variable-size .circle {
position: absolute;
background-image: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-position: center center;
z-index: -1;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease;
width: 0;
}
/* fast way to make circle height the same as current width */
.variable-size .circle:before {
display: block;
content: '';
width: 100%;
padding-top: 100%;
}
/* demo window css */
HTML,
BODY {
height: 100%;
min-height: 100%;
background: black;
position: relative;
font-family: "Lucida Console", Courier, monospace;
}
<div class="variable-size">
<textarea class="content" rows="1" placeholder="TYPE TEXT OR RESIZE ME ↘"></textarea>
<div class="circle"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
See jsfiddle here... https://jsfiddle.net/joshmoto/6d0zs7uq/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
Source: https://www.w3schools.com/
You could use flex display and insert empty flex-items around the inner div and use flex-basis to fix their width.
Try this
.square {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: black;
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
.emptyDiv {
flex-basis: 120px
}
<div class="square">
<div class="emptyDiv"></div>
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
<div class="emptyDiv"></div>
</div>
In my app I obtain an image and the size with a fetch from a JSON. I would like to fill the gap that leaves the image while is loading.
The problem is that, if I make a div that fills the gap with a fixed width and height, the filling div is not responsive (in the case of the image the style is height: auto; max-height: XXXpx;) How can I make it responsive without loosing the width / height proportion?
IMPORTANT: My objective is to make it work with any width and height combination, without losing the ratio / proportion.
EDIT:
Here is an example of my issue. You will check that the div has a fixed size that overflows when the width or the height of the window is less than 256px but the image is responsive. How can I make the div responsive too, without losing the proportion?
<html>
<head></head>
<body>
<!--
This div contains the image. By default, the div uses the `container`
class (detailed below) that has a fixed width and height that is
the same size of the image. The class will be removed in other to make the
image "responsive" when the image download finished.
-->
<div
id="container"
class="container"
>
<!--
This image uses the `image` class which has the needed styles to make it responsive.
In addition, it will fire "removeDummyClass()" when is loaded.
-->
<img
class="image"
src="https://sftextures.com/texture/2574/0/2578/dog-foot-pad-on-white-snow-frozen-ground-dark-footprint-sign-icy-cold-winter-pattern-seamless-texture-256x256.jpg"
onload="removeDummyClass()"
/>
</div>
<script type="text/javascript">
// With this function, we will remove class that has a dummy image
// (in this case, a div with a background-color)
const removeDummyClass = () => {
document
.getElementById('container')
.classList
.remove('container')
}
</script>
<style>
.container {
background-color: red;
width: 256px;
height: 256px;
}
.image {
height: auto;
max-width: 100%;
}
</style>
</body>
</html>
EDIT 2:
I'm adding some screenshots, not for debugging, just making the issue clear.
The first load, the div overflows because the width and height is set manually.
Then, when the image is loaded, the image will be resized without losing the proportion between width and height.
I did it using a bit of javascript:
Hide the content of the page and show your background item.
When the body is not ready run a script interval every 1 second (you can handle this on your proper way) and when the page body is ready display it changing the property of the page display:none to display:block
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined)
{
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('page', true);
show('loading', false);
});
#page {
display: none;
}
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-image: url("URL_TO_YOUR_IMAGE");
background-repeat: no-repeat;
background-position: center;
}
.loading-page {
background: #72c3c9; /*The background color*/
width: 100vw;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="page" style="display:none">
<!-- YOUR PAGE CONTENT GOES HERE -->
</div>
<div id="loading" class="loading-page">
</div>
</body>
</html>
I finally achieve it using an SVG filled with a rect with the height and width expected, then onload remove the SVG with display: none and show the image with display: block.
<html>
<head></head>
<body>
<style>
.image {
border-radius: 15px;
box-shadow: 0 0px 15px rgba(0, 0, 0, 0.4);
height: auto;
width: 100%;
max-width: 256px;
}
.image-final {
display: none;
}
.image-dummy-rect {
fill: red;
}
</style>
<div>
<svg
id="image-dummy"
class="image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
>
<rect
id="image-dummy-rect"
class="image-dummy-rect"
width="256"
height="256"
/>
</svg>
<img
id="image-final"
class="image image-final"
src="https://sftextures.com/texture/2574/0/2578/dog-foot-pad-on-white-snow-frozen-ground-dark-footprint-sign-icy-cold-winter-pattern-seamless-texture-256x256.jpg"
onload="removeDummyClass()"
/>
</div>
<script type="text/javascript">
const removeDummyClass = () => {
document.getElementById('image-dummy').style.display = 'none'
document.getElementById('image-final').style.display = 'block'
}
</script>
</body>
</html>
Example 1 - Zoom in issue
Example 2 - Zoom out issue
How can we make the grey line 100% width (for both zoom in and out) ?
Notice: the left and the right div position
cause a white gap issue from the right side of the screen.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
/* Start BG RECT */
.bg-rect {
position: absolute;
top: 50px;
left:0; right:0; /* Required to be 100% 100% */
min-width: 980px; /* max for iPad */
height: 263px;
}
#bg-rect-important {
overflow: hidden; /* Disable right bg breaking by words on the right! */
/* overflow hidden: disallows child be taller then parent?! */
background-color: #656565;
}
/* Start BASE RECT */
.base-rect {
position: relative; /* margin: auto works only with position: relative */
margin: 0 auto; /* Centralize! */
/*!SPACE>*/top:32px; width:940px;
/*left: -300px; /* unfortunately scroll doen't work */
}
#base-rect-lime {
background-color: #3F3;
height:249px;
}
/* Start LIME RECT : left, right */
#left-text {
position:absolute;
left:-200px;
width:200px; height:218px;
}
#right-text {
position:absolute;
right:-200px;
width:200px; height:218px;
}
/* End LIME RECT : left, right */
/* End BASE RECT */
/* End BG RECT */
</style>
</head>
<body>
<div class="bg-rect" id="bg-rect-important">
<div class="base-rect" id="base-rect-lime">
<div id="left-text"></div>
<div id="right-text"></div>
</div>
</div>
</body>
</html>