How do I make scaled image not go past its container

How do I make scaled image not go past its container - javascript

I'm trying to make an image within a container not soar past 15px from the bottom of the container when it is scaled larger. What is the best way to do this? I've messed around with getBoundingClientRect() and such but haven't found the key to doing it. Here is an example of my problem.
function myFunction() {
var img = document.getElementById('image');
img.style.WebkitTransform = ('scaleY(2.0)');
img.style.width = img.getBoundingClientRect().width + 'px';
img.style.width = img.getBoundingClientRect().height + 'px';
}
.rand {
width:50px;
height:50px;
position:absolute;
bottom:15px;
left:45%;
}
div#test {
margin:auto;
border:2px solid red;
width:200px;
height:200px;
object-fit: contain;
overflow: hidden;
position:relative;
}
<div id='test'>
<img id='image' class='rand' src = 'https://www.purebuttons.com/cp/Pure_Buttons/html/images/squareprev.png'>
</div>
<button onclick='myFunction()'>CLICK</button>
</body>
So have the image fully be scaled larger and smaller but still sitting at 15px from bottom, and not go lower once scaled. Thanks for any help.

Probably the easiest way is to set the transform to start from the bottom with transform-origin:
function myFunction() {
var img = document.getElementById('image');
img.style.transform = 'scale(2.0)';
}
.rand {
width: 50px;
height: 50px;
position: absolute;
bottom: 15px;
left: 45%;
transform-origin: center bottom;
}
#test {
margin: auto;
border: 2px solid red;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
<div id='test'>
<img id='image' class='rand' src='https://i.stack.imgur.com/YxTTq.png'>
</div>
<button onclick='myFunction()'>CLICK</button>

Instead of changing the attributes you can change the class to play with the position.
function myFunction()
{
var img = document.getElementById('image');
//img.style.WebkitTransform = ('scaleY(2.0)');
img.className = 'rand2';
}
.rand
{
width:50px;
height:50px;
display:block;
position:absolute;
bottom:15px;
left:45%;
border:1px solid red;
}
.rand2
{
width:50px;
height:50px;
display:block;
position:absolute;
transform: scaleY(2.0);
bottom:35px;
left:45%;
border:1px solid red;
}
div#test {
margin:auto;
border:2px solid red;
width:200px;
height:200px;
object-fit: contain;
overflow: hidden;
position:relative;
}

Related

HTML and CSS for gallery image border [duplicate]

This question already has answers here:
Double border with different color [duplicate]
(8 answers)
Closed 8 months ago.
I want create this type gallery. I have multiple images in it. So when I hover on it then images should changes automatically.
Now I'm facing one issue i.e. How to add two borders like this using css or any other style-sheet.

You can add some box-shadow together. The first one is gray. The second one is white as a border with a one-pixel movement than the previous.
body{
background:#efefef;
}
.wrapper {
position: relative;
padding:10px;
}
.image {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
box-shadow: 5px -5px 0 gray,6px -6px 0 white,11px -11px 0 lightgray,12px -12px 0 white;
}
<div class="wrapper">
<div class="image"></div>
</div>

It can be done with three elements. One element is the image itself, and it has a tiny 1px white border. Then there are two elements behind the image that have grey background and also white border.
Look at this example, pretty much the same, just change the div with class image for an actual img element and invert the positioning and you are ready to go.
.wrapper {
position: relative;
}
div {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
}
.first {
left: 5px;
top: 5px;
z-index: -1;
background-color: #777;
}
.second {
left: 10px;
top: 10px;
z-index: -2;
background-color: #AAA;
}
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="image"></div>
</div>

try this
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:black;
}
.imageContainer{
display:inline-block;
position:relative;
width:100px;
height:100px;
top:200px;
left:200px;
padding:50px;
background: url("https://media.cntraveller.com/photos/611bf0b8f6bd8f17556db5e4/1:1/w_2000,h_2000,c_limit/gettyimages-1146431497.jpg") no-repeat center center/cover;
}
.divOne{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-6px;
left:6px;
z-index:-1;
}
.divTwo{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-10px;
left:10px;
z-index:-1;
}
</style>
</head>
<body>
<div class="imageContainer">
<div class="divOne"></div>
<div class="divTwo"></div>
</div>
</body>
</html>

align text to bottom of background image with size contain

I need text aligned to the bottom (and over the top) of a background image scaled with:
background-size: contain;
I tried scaling the text container with javascript, by matching the size of the image element:
var positionInfo = slide.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
info.style.width=width + "px"
info.style.height=height + "px"
But I can't get the actual size of the background image, only the element is it contained by. Is there a way to get the background images exact size?
Full code:
var info = document.getElementById('info');
var slide = document.getElementById('slide');
window.onresize = function(event) {
posInfo()
};
function posInfo() {
var positionInfo = slide.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
info.style.width=width + "px"
info.style.height=height + "px"
}
posInfo()
* {
margin: 0;
padding: 0;
background: black;
box-sizing: border-box;
}
img {
max-width: 100%;
}
.fullscreen {
width: 100%;
height: 100vh;
position: absolute;
border: 100px solid black;
}
#slide {
border:2px solid red;
position: relative;
height: 100%;
display: block;
background: url("http://c0177.paas1.ams.modxcloud.com/standard/8.jpg")
no-repeat center center;
background-size: contain;
z-index:3;
}
#info {
border:2px solid yellow;
display:block;
z-index:3;
background:transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#info a {
position:absolute;
bottom:0;
background:yellow;
padding:20px 120px;
left: 50%;
transform: translateX(-50%);
}
<div class="fullscreen">
<div id="slide"></div>
<div id="info"><a>Project name</a></div>
</div>

So, one way to accomplish what I believe you want to do is by making the .fullscreen class be a css grid that centers content. Then, instead of having the image being the background, you just put it in an image tag and it will mimic the contain style with some help from max-height. Here is an example: https://codepen.io/omnitect/pen/wxEMjG
<div class="fullscreen">
<div id="slide">
<img src="https://c0177.paas1.ams.modxcloud.com/standard/8.jpg" />
<div id="info"><a>Project name</a></div>
</div>
</div>
Also, in the style, you want to modify #info to not have the transforms, it just needs a really basic position styling.
.fullscreen {
width: 100%;
height: 100vh;
position: absolute;
border: 100px solid black;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr auto 1fr;
}
#slide {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
border: 2px solid red;
position: relative;
display: block;
z-index: 3;
max-height: calc(100vh - 200px);
}
#slide img {
max-height: calc(100vh - 200px);
width: auto;
max-width: 100%;
}
Note: The calc(100vh) is due to the 100px border.
#info {
border:2px solid yellow;
display: block;
z-index:3;
position: absolute;
bottom: 0;
left: 50%;
}

How to centerally zoomin background image when mouse over?

**HTML**
<div class="bimage">
<img class="fimage" src="http://tinyurl.com/luzr4fr"/>
</div>
**CSS**
.bimage {
display: flex;
border:2px solid red;
width:100%;
height:300px;
background:url('http://tinyurl.com/orwbgck');
background-size:100%;
}
.bimage:hover{
background-size:120%;
}
.fimage {
width: 200px;
margin: auto;
}
Here I can zoom in image when mouse over on that image. But I need centerally zoom in image and animation effect with out increasing div width and height.
JSFIDDLE

You can add background-position:center along with background-size
.bimage {
display: flex;
border:2px solid red;
width:100%;
height:300px;
background:url('http://tinyurl.com/orwbgck');
background-size:100%;
transition:1s all;
background-position:center;
}
.bimage:hover{
background-size:200%;
}
.fimage {
width: 200px;
margin: auto;
}
<div class="bimage">
<img class="fimage" src="http://tinyurl.com/luzr4fr"/>
</div>

return the "top" property of a tag with javascript

I have two divs for which I have two buttons. Clicking on the buttons, I want to alert the "top" style property of the divs, in the codes as below:
However, when I click on the buttons, what they return is "undefined". I'd be grateful if you kindy let me know where I am going wrong.
HTML:
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
</div>
javascript:
function edit(clicked_edit) {
var tp=document.getElementById('section_'+clicked_edit).top;
alert(tp);
}
CSS:
*{
margin:0px;
padding:0px;
}
body{
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;
}
#container{
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;
}
#section_1{
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;
}
#section_2{
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;
}
#edit_1{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background-color:red;
}
#edit_2{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background-color:green;
}

Js Fiddle
change .top to .offsetTop you will get the position
function edit(clicked_edit) {
var tp = document.getElementById('section_' + clicked_edit).offsetTop;
alert(tp);
}
Edit
made changes to set the div to same position as the offset value
function edit(clicked_edit) {
var tp = document.getElementById('section_' + clicked_edit).offsetTop;
document.getElementById('expansion').style.top = tp + 'px'; // need to add this
document.getElementById('expansion').style.display = 'block';
}

For that you would use getComputedStyle method of the window object in this way:
function edit(clicked_edit) {
var el = document.getElementById('section_'+clicked_edit);
top = window.getComputedStyle(el, null).getPropertyValue('top')
alert(top);
}
function edit(clicked_edit) {
var el = document.getElementById('section_' + clicked_edit),
top = window.getComputedStyle(el, null).getPropertyValue('top')
alert(top);
}
* {
margin:0px;
padding:0px;
}
body {
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;
}
#container {
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;
}
#section_1 {
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;
}
#section_2 {
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;
}
#edit_1 {
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background-color:red;
}
#edit_2 {
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background-color:green;
}
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
</div>

How to center all the layers canvas?

I want to see all the layers Exact location and size of the yellow square
I want to position all the layers to center width and top;10px; inside the yellow rectangle.
all the layers include layerA should be width:1000px height:500px
I try to do that In many ways but something Beyond my understanding.
I know it can be done but somting wrong in my code.
I am grateful for any help.
Demo jsFiddle
my code:
<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
body {background-color:black; padding:0; margin:0; }
#layers {position:relative; width:1000px; height:500px; padding:0; margin-left:auto; margin-right:auto; z-index:1; top:10px; background-color:blue; }//contain all layers
#layerA {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:4; background-color:green; border:1px green solid; left:0; top:0;}//background screen show
#layerB {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:2; background-color:red; border:1px red solid; visibility:hidden; }//Variable animation hidden
#layerC {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:3; background-color:brown; border:1px brown solid; display:none; }//Variable animation hidden
#layerD {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:5; background-color:azure; border:1px azure solid; }//create ball
#pos{top:50px; left:10px; color:white; font-size:16px;}
#status{position;absolute; top:10px; left:10px; color:white; font-size:16px;}
#status1{position;absolute; top:20px; left:10px; color:white; font-size:16px;}
#fps_count {position: absolute; top: 10px; right: 0px; width:150px; font-size: 20px;
color: white; font-family: 'Happy Sans', cursive; border:1px red solid;}
/* Loading */
#loading {position:relative; width:1000px; height:500px; padding:0; margin-left:auto; margin-right:auto; top:10px; background:yellow; z-index:1;}
#loading #barCont {width: 400px; height: 20px; position: absolute;
top: 50%; left: 50%; margin: -10px 0 0 -200px; background: black;}
#loading #bar {width: 0; height: 20px; position: absolute; left: 0; background: #F3FF67;}
</style>
</head>
<body>
<div id="loading">
<p id="loadText">Loading...</p>
<div id="barCont"></div>
<div id="bar"></div>
</div>
<div id="layers">
<canvas id="layerA" ></canvas>
<canvas id="layerB" ></canvas>
<canvas id="layerC" ></canvas>
<canvas id="layerD" ></canvas>
</div>
<div id="fps_count">71 32 58 FPS</div>
<div id="pos">pos</div>
<div id="status">status</div>
<div id="status1">status1</div>
<script>
var WW = 1400,WH = 700,WTH = 1000,HTH = 500;
var layerA = document.getElementById('layerA'),//layer background
CanvasA = layerA.getContext('2d');
layerA.width = 300;//width size of image background
layerA.height = 150;//height size of image background
var layerB = document.getElementById('layerB'),//senvich animation hidden
CanvasB = layerB.getContext('2d');
layerB.width = WW;
layerB.height = WH;
var layerC = document.getElementById('layerC'),//DEFINE layerBVariable it use as a variable
CanvasC = layerC.getContext('2d');
layerC.width = WW;
layerC.height = WH;
var layerD = document.getElementById("layerD"),//createball
CanvasD = layerD.getContext('2d');
layerD.width = WW;
layerD.height = WH;
CanvasA.clearRect(0,0,300,150);
CanvasA.fillStyle= 'green';
CanvasA.fillRect(0,0,300,150);
CanvasB.clearRect(0,0,WW,WH);
CanvasB.fillStyle= 'red';
CanvasB.fillRect(0,0,WW,WH);
CanvasC.clearRect(0,0,WW,WH);
CanvasC.fillStyle= 'brown';
CanvasC.fillRect(0,0,WW,WH);
CanvasD.clearRect(0,0,WW,WH);
CanvasD.fillStyle= 'azure';
CanvasD.fillRect(0,0,WW,WH);
</script>
</body>
</html>

Take a look at this jsFiddle example
First, // comment is not a valid comment syntax in CSS. This was mucking up your code.
Please use /* comments */ for CSS inline commments.
Secondly, to position your canvas elements like I think I requested, I've included this CSSc code:
#layers {position:absolute; width:1000px; height:500px; padding:0; margin-left: -500px; left: 50%; z-index:1; top:10px; background-color:blue; }/*contain all layers*/
#layers canvas{width: 200px;} #layerA {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:4; background-color:green; border:1px gre solid; left:0; top:0;}/*background screen show*/
#layerB {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:2; background-color:red; border:1px red solid; visibility:hidden; }/*Variable animation hidden*/
#layerC {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:3; background-color:brown; border:1px brown solid; display:none; }/*Variable animation hidden*/
#layerD {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:5; background-color:azure; border:1px azure solid; }/*create ball*/
To center a 1000px wide absolutely positioned element I've added left: 50%; margin-left: -500px. This essentially tells the browser to place the left-most edge of the element at 50% of its container (in this case, the document body), then move it to the left the amount of half of its width in pixels. This allows it to be properly positioned in the center
FYI - I strongly suggest for you to use classes instead of IDs here to avoid repeating, unreadable CSS code.

Develop Reference

JavaScript is the programming language of the Web.

How do I make scaled image not go past its container - javascript

Related

HTML and CSS for gallery image border [duplicate]

align text to bottom of background image with size contain

How to centerally zoomin background image when mouse over?

return the "top" property of a tag with javascript

How to center all the layers canvas?

Categories

Resources