Develop Reference

Resizing images of different aspect ratios to fit a div without stretching it

I'm making a portfolio website and I am trying to make a simple image browser. I have a container div with size relative to the size of the browser window. I want that div to be able to contain images of different aspect ratios and a caption of fixed height and the width relative to the width of the image. I don't want the div to stretch to contain the images, I want to resize the image (you can see what I mean in the picture below).
illustration of the problem here
I was trying to use javascript to calculate the size of the image, but failed, because I couldn't calculate the element's size before it is actually loaded. This is how I tried to do it (not thinking about the titlebar):
var divAspectRatio = containerDiv.offsetHeight/containerDiv.offsetWidth;
var imageAspectRatio = image.offsetHeight/image.offsetWidth;
if(divAspectRatio>imageAspectRatio){
image.style.height = content_in.offsetHeight;
}else{
image.style.width = content_in.offsetWidth;
}
captionDiv.style.width = image.offsetWidth;
How do I make it work?

If your background image is in a div element, add this to your css, inside the div block:
background-size: cover;
If it's in an img element, add this to your css, inside the img block:
object-fit: cover;

Try using this css element:
object-fit: cover
This way, your image will get resized to fit the containing box!

The desired layout needs some calculation as the placing of an image that has aspect ratio bigger than the aspect ratio of the container differs from one that doesn't. Also to note is that the caption area is required to be only as wide as the displayed image but has a fixed height.
The imgs are wrapped in an 'innerdiv' which will also contain the caption. On loading the image's aspect ratio is found and stored as a CSS variable. Other CSS variables are set up in advance - see the head of this snippet for those that can be chosen. Remaining calculations are done in CSS.
window.onload = function () {
const imgs = document.querySelectorAll('.container .innerdiv .img');
imgs.forEach(img => {
img.parentElement.style.setProperty('--imgratio', img.naturalWidth / img.naturalHeight);
img.parentElement.classList.add(( (img.naturalWidth / img.naturalHeight) > getComputedStyle(img).getPropertyValue("--containerratio") ) ? 'wider' : 'thinner');
});
}
* {
padding: 0;
margin: 0;
}
.container {
/* SET THE NEXT 4 VARIABLES TO WHAT YOU REQUIRE */
--unit: 1vmin; /* the basic unit - must be fixed e.g. vmin, px, ch not % */
--containerw: 40; /* width of a container in these units */
--containerratio: 1.5; /* the ratio of width to height */
--captionh: 4vmin; /* height of a caption including its units (which must be fixed e.g. vmin, px, em */
--containerh: calc(var(--containerw) / var(--containerratio));
display: inline-block;
width: calc(var(--containerw) * var(--unit));
height: calc(var(--containerh) * var(--unit));
position: relative;
border: solid;
}
.innerdiv {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.innerdiv.thinner {
width: calc(var(--imgratio) * ((var(--containerh) * var(--unit)) - var(--captionh)));
height: 100%;
left: 50%;
transform: translateX(-50%);
}
.innerdiv.wider {
width: 100%;
height: calc((var(--containerw) / var(--imgratio)) * var(--unit) + var(--captionh));
top: 50%;
transform: translateY(-50%);
}
.img {
width: 100%;
height: auto;
}
.caption {
font-size: 2vmin;
background-color: yellow;
text-align: center;
width: 100%;
height: var(--captionh);
position: absolute;
top: calc(100% - var(--captionh));
left: 0;
}
<div class="container">
<div class="innerdiv">
<img class="img" src="https://picsum.photos/id/1016/200/300">
<div class="caption">CAPTION</div>
</div>
</div>
<div class="container">
<div class="innerdiv">
<img class="img" src="https://picsum.photos/id/1016/500/200">
<div class="caption">CAPTION</div>
</div>
</div>
<div class="container">
<div class="innerdiv">
<img class="img" src="https://picsum.photos/id/1016/300/300">
<div class="caption">CAPTION</div>
</div>
</div>

How to use jQuery to fadeOut() different parts of a single image ?

The code :
$("#button1").click(function(){
$("img").fadeOut();
});
fades out the whole element but I want to fade specific parts of an image like 4px from top and 2px from left .If CSS3 methods are needed , I am ready to do so.

HTML code:
<div class="container">
<div class="image"></div>
<div class="mask width100 height3 top0 left0"></div>
<div class="mask width100 height3 top0 left3"></div>
<div class="mask width3 height54 top10 left22"></div>
<div class="mask width10 height30 top40 left12"></div>
<!-- more masks goes here -->
</div>
CSS code:
.container {
position: relative;
width: 400px;
height: 400px;
}
.image {
width: 100%;
height: 100%;
background: url(/*your url*/);
}
.mask {
position: absolute;
background: #000;
}
.width100 { width: 100% }
.width10 { width: 10% }
.width3 { width: 3% }
/* etc */
height3 { height: 3% }
height30 { height: 30% }
height100 { height: 100% }
/* etc */
top0 { top: 0 }
top5 { top: 5% }
/* etc */
Your masks have absolute positions, and you can set their sides with .widthXX and .heightXX classes + position about the image with .topXX and .leftXX classes. (this is not ideal method, but it can be done fast)
Than with JS you can detect all that masks (with jQuery - $('.mask')) make an array of objects (if it's needed), and hide tham with .hide() or .fadeOut() methods in line order (0,1,2,3...) or randomly (get random index of array, hide it, and delete element from array).
Hope you understood my thoughts, and will make it better and more interesting :)

Making text scroll at different speed in a simple jquery parallax example

I am following this parallax tutorial that uses only jQuery. I slightly modified the HTML:
<section id="home" data-type="background" data-speed="10">
<article data-speed="1">One</article>
<article data-speed="20">Two</article>
</section>
<section id="about" data-type="background" data-speed="10">
</section>
css
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#home article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
#about {
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
And the jQuery:
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
This code moves everything in a section at the same speed, but I would like to have the <article> text move at a variable speed different (defined in the <article data-speed>) from the background image.
I wasn't sure how to move the text because background-position is for images, and I tried adjusting top but that didn't have any effect. I also tried setting transform: translateZ(); on the article css, but this also did not work.
How can I add different speeds to the <article> texts? I'd also like to stick to jQuery in the spirit of the example.

try modifying markup always wrapping the article with a section, for ex.:
<section id="about" data-speed="4" data-type="background">
<article>One</article>
</section>
<section id="home" data-speed="20" data-type="background" >
<article >Two</article>
</section>
edit--explanation
this is the source of your parallax jquery script:
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
as you can tell what it's doing is slowing down the scroll of the section[data-type="background"] with a factor of data('speed');
This kind of script is built in a way to have one layer of parallax, if you want more parallax layers check wagersfield's parallax script

Scale image properly but fit inside div

I am making an image gallery. This is the HTML for the image:
<div style="width: 84%; height: 100%; float: left; text-align: center;"><img
id="mainimage" style="height: 100%;"
src="http://www.gymheroapp.com/workouts/img/spinner.gif"/></div>
<!-- Loading spinner is temp image, will be replaced by Javascript later -->
It works fine when the image is square, or the width is not too much more than the height. It breaks when the width is too great, though. Example of image overflowing:
Is there a way I could check whether there is overflow within my Javascript? Something like this:
image.setAttribute('height', '100%')
image.removeAttribute('width')
if (image.isOverflowing()) {
image.setAttribute('width', '100%')
image.removeAttribute('height')
}
Even better, is there any way to scale the image properly but fit it withing the containing div?

jquery example
Best fit:
$('img').on('load',function(){
var css;
var ratio=$(this).width() / $(this).height();
var pratio=$(this).parent().width() / $(this).parent().height();
if (ratio<pratio) css={width:'auto', height:'100%'};
else css={width:'100%', height:'auto'};
$(this).css(css);
});
Edit to account for caveat where image is in cache
$('img').on('bestfit',function(){
var css;
var ratio=$(this).width() / $(this).height();
var pratio=$(this).parent().width() / $(this).parent().height();
if (ratio<pratio) css={width:'auto', height:'100%'};
else css={width:'100%', height:'auto'};
$(this).css(css);
}).on('load', function(){
$(this).trigger('bestfit');
}).trigger('bestfit');

Heres a simple CSS solution:
html, body { height: 100%; }
#gallery { height: 100%; width: 100%; position: relative; }
#gallery img {
/* CSS Hack will make it width 100% and height 100% */
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Maintain aspect ratio */
max-height: 100%;
max-width: 100%;
}
<div id="gallery">
<img src="http://cl.vvmonnickendam.nl/files/large/87" alt="Awesome blabla gedoe">
</div>
Fiddle example

Bar fixed on top, but only if the scroll tries to hide it

I have a menu on the highest zone of my web, but not on the top. I want that when the user scrolls the page it stays on the top, but only when it would disapear instead. If the title is visible i want the menu under it, on an apparent static position.
Is it possible without javascript, only with css? I see it on a website, but I don't remeber where.
Thank you in advance (and sorry for my ugly english!) ;)

I think this is what you are looking for: https://jsfiddle.net/QuVkV/2/
Here html structure:
<div id='wrapper'>
<div id='upper'>This is upper content</div>
<div id='position-saver'>
<div id='bar'>This is the menu bar</div>
</div>
<div id='lower'>This is some content lower than the menu bar</div>
</div>
This is the css :
#wrapper {
width: 100%;
height: 2000px;
}
#upper {
width: 100%;
height: 100px;
}
#position-saver {
height: 50px;
width: 100%;
}
#bar {
position: static;
height : 50px;
width: 100%;
}
And here is the javascript :
$(document).on('scroll', function(){
if ($('#bar')[0].offsetTop < $(document).scrollTop()){
$("#bar").css({position: "fixed", top:0});
}
if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){
$("#bar").css({position: "static", top: 0});
}
});

I'm not sure but I've seen this type of thing on many site. One on 9gag.com
Anyway, you can use the position property of the css.
like this one: JSFiddle
#scroll-me{
width:100%;
height:100px;
background:#333;
position: fixed;
top:15px;
}
The position:fixed with top:15px of the scroll-me div makes it always 15px on top