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>
Related
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>
I have a beige Div box that responds to the window size, it's always x amount distant from window borders, check webpage: https://loiz.xyz/ everything is working fine up to here.
👉 Now, I want to add a very small text that is 20px from the bottom edge of the div box, check image below.
I've tried centering the text so many times, but it always fails. Never is centered, or it goes between the div box and vp window on the right, or it is a fixed distance from left so when window is adjusted it's not quite on the center.
Please help me understand where I should put the <h5>text</h5> tag and how to put it inside the div box 20px from bottom, without messing with the existent centered gif. Optionally, I want to decrease that text size according to vp window size, so it shows smaller on mobile and bigger in laptops.
current code:
body {
background: #C0C0C0;
padding: 0;
margin: 0;
display: flex;
height: 100vh;
}
div {
width: calc(100% - 40px);
height: calc(100% - 40px);
background: #f0e8e6;
overflow: hidden;
margin: auto;
display: flex;
}
img {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:calc(100% - 40px);
height:calc(100% - 40px);
max-width:40vw;
object-fit:contain !important;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div>
<img src="https://loiz.xyz/loiz.gif"
</div>
<style type="text/css"> html, body {margin: 0; height: 100%; overflow: hidden}</style>
</body>
</html>
After giving position fixed property to h5 and specifying the position, you can adjust the size of the text with #media according to the screen size.
body {
background: white;
padding: 0;
margin: 0;
display: flex;
height: 100vh;
}
div {
width: calc(100% - 40px);
height: calc(100% - 40px);
background: #f0e8e6;
overflow: hidden;
margin: auto;
display: flex;
}
img {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:calc(100% - 40px);
height:calc(100% - 40px);
max-width:40vw;
object-fit:contain !important;
}
h5{
position:fixed;
bottom:0;
left:50%;
transform:translatex(-50%);
font-size:1.5rem;
line-height: 1.5rem;
}
#media screen and (min-width:768px){
h5{
bottom:20px;
font-size:0.8rem;
line-height: 0.8rem;
}
}
<div>
<img src="https://loiz.xyz/loiz.gif" />
<h5>TEXT</h5>
</div>
I have the following code that does not cover the full page height if a page has content beyond the normal view port (not having to scroll). If I scroll down the outer div displays for just a small bit and that goes back to white.
Why is the outer div not taking the full height of the page even if it requires scrolling?
html ,body {
height: 100%;
font-style: Helvetica;
}
.page_background, .page { margin: 0 auto; }
.page_background {
width: 100%;
min-height: 100%;
background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
background: linear-gradient(#282828, #888888); /* Standard syntax */
position: absolute;
/*height: 100%;*/
}
.page {
background-color: #FFFFFF;
width: 85%;
min-height: 100%;
bottom: 0;
position: absolute;
height: 100%;
left: 7.5%;
}
<div class="page_background">
<div class="page">
</div>
</div>
I created a fiddle to demonstrate what I am doing. You can even see if you scroll in the fiddle, it doesn't take the gray border.
https://jsfiddle.net/1qwwtgjp/
Edit: Your Main Issue is CSS Positioning
See here: https://jsfiddle.net/1qwwtgjp/3/
You have used position: absolute; in your styles, but are looking for your content to flow (and your background height with it). Remove all the absolute positioning, including the left, bottom, etc, and the explicit height on your .page element so it can flow to whatever height it truly is. This will bring the outer wrapper along with it.
So the new styles for your .page class should be:
.page {
background-color: #FFF;
width: 85%;
min-height: 100%;
/** REMOVE THESE: **/
/* left: 7.5%; */
/* bottom: 0; */
/* position: absolute; */
/* height: 100%; */
}
Old Answer:
If I understand your question correctly, you may simply not be aware that browsers tend to have default margins on the <body> tag.
Simply add a style to remove it:
html, body { margin:0; }
and see if that solves your issue.
You can fix this by assigning overflow property to hidden for the outermost wrapper div.
.outerpagewrapperdiv{
overflow:hidden;
}
I'm trying to figure out how to resize a background image only if it is bigger than the div which contains it using only CSS.
<div id="container>
</div>
#container{
width: 100px;
height: 100px;
background-image: url("...myimagepath");
}
If the image is bigger than 100x100 px it should be resized but if it is smaller I need to keep it center and not adapted. In my code it works as aspected for images smaller than the div while the image is not resized for bigger ones.
You can frig it by putting the image in a div that sits in the background.
So HTML:
<div id="container>
<div id="background">
<img src="...myimagepath">
</div>
Container content here.
</div>
CSS:
#container{
width: 100px; /* Your original dimensions */
height: 100px;
position: relative; /* Lets anything in it be positioned relative to it */
}
#background{
width: 100%; /* Same width as parent container */
height: 100%; /* Ditto height */
position: absolute; /* Take out of document flow. Default position 0,0 */
z-index: -1; /* Push it behind anything else in its container */
}
#background img {
max-width: 100%; /* Don't let it get wider than its container */
max-height: 100%; /* Nor taller */
display: block; /* Lets margins be set (otherwise in-line) */
position: absolute: /* Lets us position it */
top: 0; /* Put it at the top ... */
left: 0; /* on the far left ... */
bottom: 0; /* and at the bottom (makes sense later) */
right: 0; /* and the far right (ditto) */
margin: auto; /* Best compromise between left/right & top/bottom = centre */
}
I seem to half remember there might be the odd browser that doesn't treat the zeros for top, left, etc properly. If that's true, use a value like 1px instead.
The parent grey div hides the bottom part of the lime box.
Can I keep the bottom part of the lime box visible?
What is the right way of using overflow: hidden; here?
It is also important to save 100% width of the parent grey box.
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) ?
<!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>
I'm pretty sure this is what you want:
#bg-rect-important {
overflow-y: auto;
overflow-x: hidden;
background-color: #656565;
width: 100%;
}
Fiddle here - http://jsfiddle.net/h2E7v/
We think,
#bg-rect-important {
background-color: #656565;
}
will make your the bottom part of the lime box visible
It also save 100% width of the parent grey box
Hope this help you.