How to Change Image on hover - javascript

I'm attempting to set up a way for users to be able to hover over a small preview of an image and have a "featured" section show this image in its full size. I've managed to accomplish that with the code below.
My problem is when images are very different sizes (one landscape and one portrait It looks very bad and makes the page jump.
Goal: I'm trying to figure out a way to avoid this. I want to find a way to display the main image in a uniformed look. Aka the same size. I want to accomplish this without heavily distorting the images by changing their sizes. Any help is hugely appreciated.
Check out the JS fiddle: https://jsfiddle.net/4hrvxpe2/10/
HTML:
<img id='mainPicture' class="image-resposive" src= "https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">
<br>
<br>
<div class='smallerImages'>
<img id='imageNum1' class="small" src="http://i.huffpost.com/gen/4393678/images/o-THE-MATRIX-facebook.jpg">
<img id='imageNum2' class="small" src="https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">
</div>
CSS:
.smallerImages{
display:inline-block;
}
#mainPicture{
width: 75%;
height: 75%;
display: table; margin: 0 auto;
}
.small{
max-width: 15%;
max-height: 15%;
min-width: 15%!important;
min-height: 15%!important;
}
Jquery:
$('#imageNum1').hover(function() {
$('.small').removeClass('selectedImage')
var src = $('#imageNum1').attr('src');
$('#imageNum1').addClass('selectedImage')
$('#mainPicture').attr('src', src);
});
$('#imageNum2').hover(function() {
$('.small').removeClass('selectedImage')
var src = $('#imageNum2').attr('src');
$('#imageNum2').addClass('selectedImage')
$('#mainPicture').attr('src', src);
});

Adding a max-height and max-width makes it better.
Check out https://jsfiddle.net/4hrvxpe2/13/
Or you can encapsulate it in a div. Something like
<div class="container"><img src="img.jpg"></div>
and give dimensions to the container, as in:
.container{
height: 100px; width: 200px; overflow: hidden;
}
Check out https://jsfiddle.net/4hrvxpe2/22/
Or
In order for the image to take a fixed size always use a div and set it as its background and make it cover the div:
Check out https://jsfiddle.net/4hrvxpe2/23/

If you don't want the images to affect the rest of the elements in the document you need to take them out of the flow.
This is possible if you give the selected image a fixed position and make use of the transform property.
With that being said, here's a very rough example of how I would do it.
Responsive example (open in full screen and resize the window):
$('#imageNum1').hover(function() {
$('.small').removeClass('selectedImage')
var src = $('#imageNum1').attr('src');
$('#imageNum1').addClass('selectedImage')
$('#mainPicture').attr('src', src);
});
$('#imageNum2').hover(function() {
$('.small').removeClass('selectedImage')
var src = $('#imageNum2').attr('src');
$('#imageNum2').addClass('selectedImage')
$('#mainPicture').attr('src', src);
});
body {
position: relative
}
.smallerImages {
width: 20%;
}
#mainPicture {
max-width: 55vw;
max-height: 75vh;
margin: 0 auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.small {
width: 100%;
margin: .5em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='smallerImages'>
<img id='imageNum1' class="small" src="http://i.huffpost.com/gen/4393678/images/o-THE-MATRIX-facebook.jpg">
<img id='imageNum2' class="small" src="https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">
</div>
<img id='mainPicture' class="image-resposive" src="https://images-na.ssl-images-amazon.com/images/I/51EG732BV3L.jpg">
<br>
<br>

My best attempt so far is the following. This works okay but it does distort images that are very tall. Can anyone suggest improvements?
JSFiddle: https://jsfiddle.net/4hrvxpe2/26/
.small{
max-width: 10%;
height: 100px;
min-width: 10%!important;
}
.smallerImages{
margin: 0 auto;
}
#mainPicture{
width: 100%;
height: 600px;
display: table; margin: 0 auto;
}

I accomplished the goal by changing 15% of maximum and minimum width in .small to 15vw.
.small{
max-width: 15vw;
max-height: 15%;
min-width: 15vw!important;
min-height: 15%!important;
}
vw is for the viewport width, while % will take the content size and size it relative to that. When the image changes, because of the image size differences, that image is increasing the content width, meaning that anything using % will change to the new width.
Here's the JSFiddle.

Related

Prevent Content Jumping Below Image as it Loads

I currently have an image that I am giving 100% width. The issue I am noticing is that while the image loads, the content below jumps up to where the image sits while it loads. I know I need to give the image some sort of fixed height, but I want the image to remain responsive. The desired effect: The image looks exactly as it does when applying 100% width and prevents the content below from jumping while the image loads. Please advise on this. My code is as follows:
<img src={"https://storage.googleapis.com/youfit-assets/239315_66400_YouFit_JUL21_Mil_Website_1680x761_CarInitial.jpg"}
alt="travel"
className="image"/>
Styles:
.image {
position: relative;
width: 100%;
height: auto;
max-height: 100%;
}
In order to duplicate what I am seeing test on an incognito browser with the following link https://codesandbox.io/s/gifted-montalcini-ohts8?file=/src/App.js
Wrap your img tag into div, so it should look like:
<div className="image-wrapper">
<img src={...} alt="travel" className="image"/>
</div>
<div style={{ marginTop: 60 }}>TEXT BELOW</div>
then replace your style for image with this style (if your aspect ratio is 4:3):
.image-wrapper {
position: relative;
padding-bottom: 37.5%;
}
.image {
position: absolute;
width: 100%;
}
or if your aspect ratio is 16:9
.image-wrapper {
position: relative;
padding-bottom: 56.25%;
}
.image {
position: absolute;
width: 100%;
}

CSS/ cut an img's width when reducing the screen/window width

I wanted to have an Image on 100% width, with a max-height. When scaling the window and you're reaching the max-height, the width should still be at a 100% but "cropping" the image bigger (provided image size is fitting). This means you can see more of the image sides (left and right) when its on a big scale window, and you can see less on a small sized window. I'll post my css try down, but i don'thave a clue how to do that at this point. Hope you're getting my issue, i'll attach a visualisation.
My Code, don't get confused, I wanted to do a slider but lets focus on only one picture now, so sliders out of the game for now:
.slider-inner img {
display:none;
max-width: 100%;
height: auto;
}
#main-slider {
width: 80%;
min-width: 500px;
height: 450px;
min-height: 400px;
overflow: hidden;
margin: 0 auto;
}
.slider-inner{
width: 100%;
height: 450px;
margin: 0 auto;
position:relative;
overflow: hidden;
float:left;
padding: 0px;
}
What i want (visualisation):
If I understood you correctly you want your image to maintain its height and crop the width when window size is smaller.
Check this example:
div{
height: 300px;
position: relative;
overflow: hidden;
}
div img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div>
<img src="https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4d542ff4e10ff7de9d35d2ec8a467454&w=1000&q=80">
</div>
You do this with background image:
.box {
height:200px;
background:url(https://picsum.photos/1300/300?image=1069) center top/auto 100% no-repeat;
}
<div class="box">
</div>
Also you had "max-width:100%" and "height: auto" before. 100% is a relative unit, saying to take up 100% of the parent container's width, and auto was telling it to scale with the width while keeping aspect ratio.

How to display thumbnails of various sizes correctly?

This is what I have right now:
It looks good only when photos are of big resolution and mostly landscape.
This is my HTML and CSS:
<div class="upload-thumb ng-scope visible">
<span class="delete-media">
<span class="icon-bin">
</span>
</span>
<img src="">
</div>
.upload-thumb {
cursor: pointer;
overflow: hidden;
float: left;
width: 44%;
/* height: 72px; */
margin: 0 11px 10px 0;
position: relative;
}
.upload-thumb img {
width: 100%;
height: inherit;
}
This is how it looks if I remove fixed height:
Photos are not scaled, but I would like to have them not scaled and placed in a fixed size container as in my first screen. I know that part of the image might be cut, but I am aware of this. How this could be done?
You could do this with css overflow: hidden. Set the dimension you want scaled on the image width, and the dimension you want to crop on the containing div with overflow hidden: Plunkr: https://plnkr.co/edit/AzoaVufPDioGHQHk4RhG?p=preview
CSS
.tmb {
width: 200px;
overflow: hidden;
}
.tmb img {
height: 100px;
}
Html:
<div class="tmb">
<img src="https://www.w3schools.com/css/trolltunga.jpg" />
</div>
Your other option is to use background images and positioning/sizing.
See this article it explains both methods well:
How to automatically crop and center an image

Make image fill div completely without stretching

I have large images of varying dimensions that need to completely fill 240px by 300px containers in both dimensions. Here is what I got right now, which only works for one dimension:
http://jsfiddle.net/HsE6H/
HTML
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}
The proportions should stay the same. Essentially, wide images should be cut off in width, while high images need to be cut off in height. So just zooming in as much as is needed to fill the container.
Not sure why I can't get it to work, do I need JavaScript for this?
Edit: To be clear. I need everything red on the fiddle gone. The images coming in are dynamic, therefore I can't use background-images. I'm open to using JavaScript. Thanks! :)
Auto-sizing Images to Fit a Div - Making the CSS Work
Here is one way of doing it, start with the following HTML:
<div class="container portrait">
<h4>Portrait Style</h4>
<img src="http://placekitten.com/150/300">
</div>
and the CSS:
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
.container img {
display: block;
}
.portrait img {
width: 100%;
}
.landscape img {
height: 100%;
}
and the demo fiddle: http://jsfiddle.net/audetwebdesign/QEpJH/
When you have an image oriented as a portrait, you need to scale the width to 100%. Conversely, when the image is landscape oriented, you need to scale the height.
Unfortunately, there is no combination of selectors in CSS that targets the aspect ratio of the image, so you can't use CSS to pick out the correct scaling.
In addition, you have no easy way of centering the image since the top left corner of the image is pinned to the top left corner of the containing block.
jQuery Helper
You can use the following jQuery action to determine which class to set based
on the aspect ratio of the image.
$(".container").each(function(){
// Uncomment the following if you need to make this dynamic
//var refH = $(this).height();
//var refW = $(this).width();
//var refRatio = refW/refH;
// Hard coded value...
var refRatio = 240/300;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < refRatio ) {
$(this).addClass("portrait");
} else {
$(this).addClass("landscape");
}
})
For each image in .container, get the height and width, test if width<height and then set the appropriate class.
Also, I added a check to take into account the aspect ratio of the containing block.
Before, I had implicitly assumed a square view panel.
For anyone looking to do this that doesn't have dynamic images, here's an all-CSS solution using background-image.
<div class="container"
style="background-image: url('http://placehold.it/300x1500');
background-size: cover; background-position: center;">
</div>
<div class="container"
style="background-image: url('http://placehold.it/1500x300');
background-size: cover; background-position: center;">
</div>
The "background-size: cover" makes it so that the image scales to cover all of the div while maintaining the aspect ratio. The CSS could also be moved to a CSS file. Although if it's dynamically generated, the background-image property will have to stay in the style attribute.
Taking out the line: max-width:100% in your CSS file seems to do the trick.
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
height: auto;
}
Also you can add > to your closing div in your HTML file could make the code neater.
<div class="container">
<img src="http://placehold.it/300x1500">
</div>
<div class="container">
<img src="http://placehold.it/1500x300">
</div>
Here is a working JSFiddle link: http://jsfiddle.net/HsE6H/19/
Here is another solution I found, that no need to seperate portraid or landscape or scripting.
<div class="container">
<img src="http://placehold.it/500x500" class="pic" />
</div>
CSS
.container{
position: relative;
width: 500px;
height: 300px;
margin-top: 30px;
background: #4477bb;
}
.pic{
max-width: 100%;
width: auto;
max-height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Here it is, it works well...
https://jsfiddle.net/efirat/17bopn2q/2/
Background can do this
set image as background
2.
div {
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
-o-background-size: auto 100%;
background-size: auto 100%;
}
or
div {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You should try this:
img {
min-width:100%;
min-height:100%;
}
I used this plugin that accounts for any ratio. It also requires imagesloaded plugin to work. This would be useful for numerous images across a site needing this treatment. Simple to initiate too.
https://github.com/johnpolacek/imagefill.js/
It works if you add the following to the parent div for img styling;
https://jsfiddle.net/yrrncees/10/
.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}
This could do the job:
.container {
float: left;
height: 300px;
width: 240px;
background-color: red;
margin: 20px;
}
img {
width:240px;
height:300px;
}
We went down the path with an Angular app of using a variation on the jQuery approach above. Then one of our bright colleagues came up with a pure CSS approach. See this example here: https://jsfiddle.net/jeffturner/yrrncees/1/.
Basically using line-height solved the problem for us. For those not wanting to hit the fiddle, the code fragments are:
.container {
margin: 10px;
width: 125px;
height: 125px;
line-height: 115px;
text-align: center;
border: 1px solid red;
}
.resize_fit_center {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
The key is in using line-height and setting the container to do the same.
I came across this topic because I was trying to solve a similar problem. Then a lightbulb went off in my head and I couldn't believe it worked because it was so simple and so obvious.
CSS
.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
min-width:100%;
min-height:100%;
}
Just set the min-width and min-height to 100% and it will always automatically resize to fit the div, cutting off the excess image. No muss no fuss.
Using an image as Div background has many disadvantages (like missing ALT for SEO). Instead of it, use object-fit: cover; in the image tag style!
The following solution is very short and clean if you need to insert img tag into div tag:
.container, .container img
{
max-height: 300px;
max-width: 240px;
}
Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>
Also, if you don't need to use a div you can just write an even shorter css:
img
{
max-height: 300px;
max-width: 240px;
}

Image 100% of a div

How can I make an image 100% of a div ?
I have a 300x300 image and I want to make it the full size of a bigger div. (the size of this div can change, so I have to specify somewhere 100% of it)
Is there a solution in CSS or Javascript ?
try this:
<img src="test.jpg" alt="test" id="bg" />
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
css3 also supports this:
#testbg{
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}
Just assign the CSS style width: 100% in the image tag to have it cover the whole space of its parent container.
Example or jsFiddle:
<div style="width: 500px;">
<img src="yourPic.png" style="width: 100%" />
</div>
<div style="width:450px;height:450px;">
<img src="photo.png" style="width:100%;height:100%;"/>
</div>
Try this: http://jsfiddle.net/XUZV5/
<div style="height:100px;width:300px;">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Mars-Schiaparelli.jpg/280px-Mars-Schiaparelli.jpg" style="width:100%;height:100px;"/>
</div>​
The CSS below will scale your image and fill 100% of the width of your div
#imgId {
width: 100%;
height: auto;
}
However if you actually want to fill the entire div by stretching the image use
#imgId {
width: 100%;
height: 100%;
}
One other useful tip is when your width is specified as a percentage and your image is square, as yours is.
HTML
<div class="container">
<img src="sample.jpg">
<div style="clear:both;"></div>
</div>
CSS
​.container {
position: relative;
width: 50%;
height: 0;
// % padding is calculated as % of width rather than height
// so height will equal 50%
padding-bottom: 50%;
}
img {
position: relative;
width: 100%;
// image is square so as long as width is 100% then height will be the same.
height: auto;
}
html, body {
height: 100%;
width: 100%;
}
The above means the image will always resize to fit the parent div exactly.
Fiddle here

Categories

Resources