I have a bunch of images, that are various sizes, in terms of width and height.
Some are square, some are rectangle, but I'd like all of them to be width and height of my choice.
I know I can use the width="" and height="" in the
So, what I was looking for, is a possible javascript solution, maybe using jQuery, that will crop the images from center on the fly?
Is this possible?
You can position the images within a container using CSS. Then ensure overflow: hidden is set on that container.
For example:
<style>
.container { position: relative; overflow: hidden; }
.container img { position: absolute; }
</style>
<div class="container">
<img src="..."/>
</div>
<script type="text/javascript">
$image = $('.container img');
width = $image.width();
height = $image.height();
$image.css({
left: 0 - (width / 2),
top: 0 - (height / 2)
});
</script>
<div style="width:200px;height:200px;overflow:hidden;position:relative;">
<img src="example.png" style="width:200px;height:200px;position:absolute;left:-10px;top:-10px;" />
</div>
Something like that! By setting the left/top properties of it's position you can simulate a crop. The above example will take 10px off the top and left of the image. This example assumes the image is 200px by 200px, obviously edit values for your image.
You may need to reposition the container div so that the image looks like it remains in the same place.
Related
Here is my code:
<div class='my-posts-container' id='<%=postobj._id%>'>
<%var menuid='menu'+postobj._id%>
<%var imagesource='../'+postobj.blob.path%>
<div class="my-posts-container-header">
<%-include('postheader.ejs',{friend:postobj.username,postid:postobj._id});%>
</div>
<div class="menu hide" id="<%=menuid%>" >
<ul >
<li><button onclick="viewpost('<%=postobj._id%>')" >view</button></li>
<li><button onclick="removepost('<%=postobj._id%>')" >remove</button></li>
<!-- <li><button onclick="copypostlink('<%=postobj._id%>')" >copy link</button></li>
<li><button onclick="editthispost('<%=postobj._id%>')" >edit</button></li> -->
</ul>
</div>
<div class="post-image" >
<img src="<%=imagesource%>" alt="image" height="400px" width="400px" style="margin: 5px;object-fit: contain;" ondblclick="like('<%=postobj._id%>')">
</div>
<span>
<%-include('likecommentsharesave.ejs',{postid:postobj._id,username:username,likes:postobj.likes})%>
</span>
<hr>
<div class="caption">
<%=postobj.caption%>
</div>
I want to keep my image size as 400px *400px
but add a background colour .post_image div,
basically, I want to add a gradient to the background based on any image in the image tag, something like this,
so that the whole 400 X 400 size is covered is this possible to achieve, if not can you suggest me other options, Thanks.
You can achieve something similar with CSS
Considering using this stylesheet
<style type="text/css">
.blured {
width:320px;
height:320px;
position: relative;
overflow: hidden;
}
.blured .blur {
height:70px;
width:100%;
position:absolute;
filter: blur(7px);
}
.blured .top {
top:0px;
background: linear-gradient(#000000d9, #00000000)
}
.blured .bottom {
bottom:0px;
background: linear-gradient(#00000000, #000000d9)
}
</style>
Then use the following markup
<div class='blured' style='background-image:url("http://placekitten.com/320/320")'>
<div class='blur top'></div>
<div class='blur bottom'></div>
</div>
The result will be something like this:
You can experiment with linear-gradient colors and the value for blur() to achieve an output close to your requirement.
References:
filter:blur()
background: linear-gradient
The effect you describe can actually be achieved. You just need to stack the same image with a smaller size on top of the image. The image underneath can then be blurred out and it will span the remainder of the 400px x 400px area.
To do this, you need to set the position field of the enclosing div to relative and that of both the images to absolute. I have reduced the height of the image sitting on top to 200px and kept the image width the same as the image underneath to resemble the style of the image in the question. Use filter: blur() to blur out the larger image.
Blurring softens the edges of the image (Remove the clip property and you'll know). Use the clip property to make the edges look "crisp".
I have used this image.
Run the code snippet below to see it in action:
<!DOCTYPE html>
<html>
<style>
*{box-sizing: border-box;}
.container {
margin: auto;
position: relative;
width: 50%;
}
.outer {
filter: blur(5px);
position: absolute;
z-index: -1;
clip: rect(0,400px,400px,0);
}
.inner {
position: absolute;
top: 100px;
}
</style>
<div class="container">
<img src="https://i.stack.imgur.com/Y1ELT.jpg" class="outer" height="400px" width="400px">
<img src="https://i.stack.imgur.com/Y1ELT.jpg" class="inner" height="200px" width="400px">
</div>
</html>
This answers part of your question. Now, to automate the image placement as per size, you can retrieve and update the image dimensions using JavaScript:
var image = new Image();
image.onload = function() {
var height = image.height;
var width = image.width;
}
image.src = "<source>";
The image underneath will always be 400 x 400 px, you can update the attributes of the image on the top as per its actual retrieved dimensions if it is smaller than 400 x 400 px. Otherwise, squash it down to 400 x 400 px to cover the entire image underneath.
I need to show a large image into a smaller div, enabling scrolling horizontally to view it. The outer div should extend up to the viewport size (which can be variable, depending on devices), but not more than it.
I have tried this way:
#outer-div {
max-width:300px; //just a guess, but I need the exact viewport size here
overflow:auto;
}
img {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
}
<div id="outer-div">
<img name="slideImg" src="https://socrates.dyndns-server.com/meteosurf/previsioni/0000.GIF" border=0>'
</div>
with no luck...
This is the JSFiddle.
All you need to do is constrain the size of the image container element (I assume outer-div here) and then set that container's overflow.
To set the max-width to the viewport width, use: max-width:100vw;
$(function(){
var imgWidth = document.querySelector("#outer-div img").width;
// Scroll the container 1/2 the width of the image
$("#outer-div").scrollLeft((imgWidth - $("#outer-div").width()) / 2);
});
#outer-div {
max-width:100vw; /* No wider than 100% of the viewport width */
overflow-X:scroll; /* show scroll bar for horizontal scrolling */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer-div">
<img src="http://study.com/cimages/videopreview/types-of-weather-maps-imagesscreen_169365.png">
</div>
Requirements:
The HTML: The iframe HAS to be inside of a containing div. See code down below.
The CSS: The container should be able to have ANY valid width and height using the vw and vh viewport units. Se code down below.
Yes, the width and height HAS to be in vw and vh.
The static video preview image should NEVER be cropped.
The static video preview image should NOT have any black bars above and below (letterboxing).
The static video preview image should NOT have any black bars to the left or to the right (pillarboxing).
The static video preview image should use as much space estate as possible inside the div that contains it.
The static video preview image should ALWAYS keep its aspect ratio of 16:9.
Scrollbars should NEVER appear.
The static video preview image should be centered vertically as well as horizontally inside the div that contains it.
Responsive Web Design.
When resizing the browser or viewport all of the above requirements should be fulfilled.
HTML:
<div class="container">
<iframe></iframe>
</div>
CSS:
.container {
width:90vw;
height:50vh;
}
Same solution, but no extra markup for keeping the ratio.
JsFiddle with same comments totally not needed.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Fully Container Centred Iframe</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.container {
display:table-cell; /* (specs: omitted table parts, the browser will insert mandatory elements in the dom tree) */
position:relative;
padding:; /* optional, margins ignored */
width:100vw; /* any value */
height:1vh; /* will expand by the :before element */
overflow:hidden; /* hide eventual black bars */
background:tan; /* bg-colors just for demo testing */
vertical-align:middle;
text-align:center;
}
.container:before {
display:block;
padding-top:56%; /* keeps the 16/9 ratio for the AP */
height:0;
background:red;
content:"\a0";
}
.container iframe {
position:absolute; /* to be ratio consistent */
top:-.5%;
left:-.5%; /* overflow eventual black bars */
border:0;
width:101%; /* grow some to avoid thinner black bars */
height:101%;
overflow:hidden; /* for html5 browsers the html attribute is depreciated */
background:gold;
}
</style>
</head><body>
<div class="container">
<iframe scrolling="no" src=""></iframe>
</div>
</body></html>
Using JavaScript, you can listen for the resize event, which fires whenever the browser's window changes shape. Then, with some simple algebra you can calculate the dimensions of the iframe based on the dimensions of the container. Here is a demo that shows all of the requirements.
"use strict";
var container = document.querySelector('.container');
var frame = container.querySelector('iframe');
function resizeVideo() {
frame.width = frame.height = 0;
var width = container.offsetWidth;
var height = container.offsetHeight;
if (height * (16 / 9) <= width) {
frame.height = height;
frame.width = height * (16 / 9);
} else {
frame.width = width;
frame.height = width * (9 / 16);
}
}
window.addEventListener('load', resizeVideo);
window.addEventListener('resize', resizeVideo);
.container {
width: 90vw;
height: 50vh;
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="container">
<iframe src="https://www.youtube.com/embed/BKhZvubRYy8" frameborder="0" allowfullscreen></iframe>
</div>
if you want Responsive use
.container, iframe {
width:100%;
height:auto;
}
.container {
width:90vw;
height:50vh;
}
.container iframe {
width: 100%;
height: 100%;
}
Seems to work quite nicely in this fiddle https://jsfiddle.net/1q10L7hj/
why don't you just use the calc method to get the aspect ratio width you are wanting?
HTML
<div class="container">
<iframe src="" frameborder="0"></iframe>
</div>
SCSS
<style>
$width = 80vw;
.container {
width: $width;
height: calc(($width/16) * 9);
position: relative;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(+50%, -50%);
transform: translate(+50%, -50%);
}
</style>
then you can change the width of it anywhere and apply whatever positioning you want on the container div and the iframe with follow suit
I think the table-cell display could solve this. Just apply it on the container so the iframe is the content
According to specs the browser will insert dummy elements where it needs to render the cell correctly and fully centre and to contain its content and if it need, grow with it.
The requirements: I think some of them is beyond the scope of your question, they will also depend on what is loaded in the iframe, out of control of this container document. My suggested code is simple, but I believe it meets all requirements possible for the iframe parent and still be crossbrowser friendly.
The forbidden black bars and the mandatory aspect ratio could still be at fault in the loaded document. If you can't control whats loaded, the last option might be the "srcdoc" and "seamless" attributes, but that would exclude e.g. all IE versions.
JsFiddle with some comments totally not needed. Hope the edit below solves the case.
Anyway, I had fun! Thanks! :)
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Fully Container Centred Iframe</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.container {
display:table-cell;
padding:;
width:100vw;
height:20vh;
background:tan;
vertical-align:middle;
text-align:center;
}
.container .ratio{
display:inline-block;
position:relative;
padding-bottom:56%;
width:100%;
height:0;
overflow:hidden;
vertical-align:middle;
}
.container iframe {
position:absolute;
top:-1%;
left:-1%;
border:0;
width:102%;
height:102%;
overflow:hidden;
vertical-align:middle;
}
</style>
</head><body>
<div class="container">
<div class="ratio">
<iframe scrolling="no" src=""></iframe>
</div>
</div>
</body></html>
I have gotten the result you wanted, I however had to add an extra div as the parent of the .container class. This JSFiddle should work for users on chrome (Windows desktop version) however when I tried to use the same fiddle on Edge and IE11 I found that it would create the undesired letter-box effect due to the image cover zooming too far out.
HTML
<div id="wrapper">
<div class="container">
<iframe scrolling="no" src="https://www.youtube.com/embed/YL9RetC0ook" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
CSS
body {
margin: 0;
}
#wrapper {
width: 90vw;
height: 50vh;
}
.container,iframe {
width: 100%;
height: 100%;
}
I am not sure if this works for Firefox, so perhaps if you have Firefox you can try it on my JSFiddle. However for Chrome (at the very least) this should be the solution you where looking for as stated by the requirements you listed.
I would recommend using a JavaScript window.resize listener to solve this kind of an issue. Cannot write code today cause I have a pretty tight schedule, but I'll try writing an algo:
On window resize, compute window width (wW) and window height (wH);
Determine container width (cW) as per wW (say cW = wW-10 to get almost all the width available - you can omit the -10 if you want);
Determine container height (cH) as per cW computed above: cH = cW * 9 / 16;
Now, if cH > wH (i.e. the container is not fitting into the screen vertically because it is too wide), we should revise cW as per available window height. In this case, cH = wH-10 (to get almost all the vertical space available - again, you can omit the -10 if you want) and then cW = wH * 16 / 9;
You should have a valid cW and cH now to make you container fit into the window without going out of the screen and you can apply it to the container.
To center the container to the screen, use position: absolute, left: 50%; top: 50%; in your CSS. When you update the cW and cH, also update margin-left: -(cW/2); margin-top: -(cH/2);
This is the concept - you can improvise as per your needs. I hope it helps.
I am working on an ASP.NET MVC website. The landing page is slit into 4 divs:
Header div (where navigation bar is)
Image slider div (where I need to slide images)
Body div (contents of main body)
Footer div
Now the width and height of the image slider div is calculated on load or resize time and adjusted to cover the whole screen.
jQuery to adjust block height and width to 100% of the viewport:
$(window).bind('load resize', function () {
$("#nivo-slider").nivoSlider();
var viewport_height = $(window).height();
var viewport_width = $(window).width();
var bodyTopPadding = $("body").css('padding-top').replace(/[^-\d\.]/g, '');
$("#BannerImageSlider").css("height", ( viewport_height - bodyTopPadding )+ "px");
});
Image slider div:
<div id="BannerImageSlider">
<div class="slider-wrapper theme-default">
<div id="nivo-slider" class="nivoSlider" style="width: 100%">
<img src="~/Graphics/Images/slider1.jpg" alt="" />
<img src="~/Graphics/Images/slider2.jpg" alt="" />
<img src="~/Graphics/Images/slider3.jpg" alt="" />
</div>
</div>
</div>
My issue is the image height. I can manage the width as I am using Nivo Slider plugin, but the height goes over or small depending on screen size. I am working on image with 1400 X 900 resolution.
I want like this: http://www.coffeecreamthemes.com/themes/jobseek/demo2/
I have bought Slider Revolution but this is for Wordpress. Secondly I cannot find related jQuery and CSS files in the download bundle.
I need the solution, I am not sure of how to achieve this behavior.
This CSS should do it for you ;)
#BannerImageSlider {
position: relative;
}
#BannerImageSlider .slider-wrapper {
position: absolute;
top: -999px;
bottom: -999px;
left: -999px;
right: -999px;
max-width: 155.56vh;
max-height: 100vh;
margin: auto;
}
This slider would show fully covering the available area. :-)
I am querying how it is possible to have a site, for arguments sake StackOverflow, where an overlay div can hide all of the content apart from what is inside the div. I suppose like a camera, you can only see whats in the viewfinder, not outside of it. I want for the moment for the viewfinder to be fixed.
I found: Fiddle
which is close, but not quite. I have tried to google and ask friend devs but no luck in the resource department. Anyone got any ideas to get me started?
<html>
<div class="content">
<h1>All the page content divs</h1>
</div>
<div id="viewport-window"></div>
</html>
You can do this by applying a clip-path style to the main element you want the overlay to be over (for instance body if you want the whole page). You could possibly also use clip for more browser support, but do keep in mind it is being deprecated.
Demo
Has a static clip-path, but when moving mouse around it will change to a 200x200 viewport that follows the mouse
jQuery(document).mousemove(function(e){
var width = jQuery(document).width();
var height = jQuery(document.body).height();
var viewW = 200;
var viewH = 200;
var top = e.pageY - (viewH/2);
var right = (width-e.pageX) - (viewW/2);
var bottom = (height-e.pageY) - (viewH/2);
var left = e.pageX - (viewW/2);
var style = "inset("+top+"px "+right+"px "+bottom+"px "+left+"px)";
jQuery(document.body).css({
"-webkit-clip-path":style,
"-moz-clip-path":style,
"clip-path":style
});
});
body {
-webkit-clip-path:inset(20px 200px 200px 40px);
-moz-clip-path:inset(20px 200px 200px 40px);
clip-path:inset(20px 200px 200px 40px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="https://placekitten.com/g/500/500" />
Actually, you can do this without an "overlay" element.
Just use a giant box-shadow and a high z-index.
In this example I've used a :hover and the 'overlay` is slightly transparent.
.wrapper {
width: 80%;
margin: auto;
text-align: center;
}
.box {
width: 100px;
height: 100px;
margin: 1em;
display: inline-block;
vertical-align: top;
background: plum;
position: relative;
}
.box:hover {
box-shadow: 0 0 0 10000px rgba(0, 0, 0, 0.75);
z-index: 9999;
}
<div class="wrapper">
<div class="box">Lorem ipsum.</div>
<div class="box">Lorem ipsum.</div>
<div class="box">Lorem ipsum.</div>
</div>
Of course, this effect is purely visual the other elements are still accessible.
You can also do that in 2 steps for example:
First, create a div to overlay entire page and hide everything.
Second, create a clone of your div(to be shown) with absolute position which has the same coordinates of the original location, and increase its z-index.
So, the logic is to hide everyting and show what you want over it. You could also visualize it with css or jquery animations.