I want to manipulate the image on mouseover , that only width changes , but the height remains same. I see the image canvas doesn't fit the actual image, so I don't see his hand anymore. How can I just stretch the width?
http://jsfiddle.net/Z8knE/3/
div
{
background-image: url( http://t2.gstatic.com/images?q=tbn:ANd9GcQmloy1dlrNWhp8Y2u3lEKYEnLvJAqWVhggUIrA_QwRxjenmus-Ww);
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
height:150px;
width:150px;
}
Try something like this:
JSFIDDLE
You don't need to use jQuery, just use pure CSS.
Remove:
background-size:100% 150px;
...and add:
max-height:150px;
The trick is that background-size can have both width and height arguments passed. Set the width to 100% and the height to whatever static height you'd like. Then, when the box expands, the image will get wider and not taller.
http://jsfiddle.net/Z8knE/5/
div
{
background-image: url( http://t2.gstatic.com/images?q=tbn:ANd9GcQmloy1dlrNWhp8Y2u3lEKYEnLvJAqWVhggUIrA_QwRxjenmus-Ww);
background-size: 100% 150px;
height:150px;
width:150px;
}
Or, if you did not actually want the height on the box to change, like you have it in your original fiddle, you can simply remove that attribute from the jQuery like so:
Edit: This fiddle contains the below javascript http://jsfiddle.net/Z8knE/15/
$(document).ready(function(){
$("div").mouseenter(function(){
$("div").animate({width:"500px"},{duration: 1000, easing: 'easeOutBounce'});
});
$("div").mouseleave(function(){
$("div").animate({width:"150px"},{duration: 1000, easing: 'easeOutBounce'});
});
});
Related
I am new to web development and I love it, but I've have encountered a problem and I can't figure it out.
I really want my images inside of my div element to be like : http://jsfiddle.net/eb51hxj1/ when i resize the browser.
<div class="divImage">
<img id="image"> </div>
<div>
My code is :
https://jsfiddle.net/a2bsarfb/
Flexbox is your friend!
.divImage {
display: flex;
justify-content: center;
align-items: center;
}
align-items centers the div content along the cross-axis (vertically, in this case), justify-content centers the div content along the main axis (horizontally).
Remove one or the other if you so desire.
You should use var
less code and make more
var divImage = document.getElementById('divImage');
....
divImage.style.backgroundImage = "url("+nextImage+")";
...
divImage.style.opacity = opacity;
remove img tag and put
<div class="divImage" id="divImage"><div>
and css
background-repeat: no-repeat
.divImage {
max-width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/*background-image: url(...)*/
}
You can just set the max-width of the .divImage to be 100%:
.divImage {
max-width: 100%;
}
Just be careful of sizing, because the height will change to keep the size ratio the same. If you explicitly set the height, the resizing won't happen, but the ratio might look weird as you resize.
Since block-elements always try to take up the full width of their parent you can use that to your advantage.
#image {
display: block;
margin: 0 auto;
}
That's also how the Fiddle you linked did it.
What I am trying to do is center an image using this bit of jQuery. The selector for my image is " .section-header img ".
var image_center = function(){
var imageWidth = $('.section-header img').width();
var windowWidth = $(window).width();
var centerFix = -(imageWidth-windowWidth)/2 ;
console.log(imageWidth, windowWidth, centerFix);
$('.section-header img').css({'left': centerFix});
}
I call the function when the document is ready and when the window is resized:
$(document).ready(function(){
image_center();
$(window)resize(function(){
image_center();
}
My problem is that I cannot get the function to work when the window initially loads. Looking in my console, the browser reads the image as having the same width as the browser. Once I resize the browser, the actual width of the image is read. Is there something built into Chrome that is tripping me up here? Is there an easier way to do this (without using background-image)??
Thank you,
CPR
It would probably be easier to use css for this job.
.section-header {
background-image: url("/path/to/image.jpg");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
Not sure if you also want the img to resize.
Here is an example with resize and your img tag + section-header div or whatever it is:
.section-header{
width: 50%;
left: 25%;
margin-left: auto;
position: absolute;
}
img{
width: 100%;
height: 100%;
}
<div class="section-header">
<img src="http://placehold.it/350x150" alt="">
</div>
https://jsfiddle.net/Lj4mfqLa/
UPDATE:
You could also try to wrap your jquery code in:
$(window).load(function(){
//initialize after images are loaded
});
instead of
$(document).ready(function(){})
how can changed image size in mouse
example
from
to
This is one way to do it using HTML/CSS/JQuery:
See this code in action via jsfiddle here.
THE HTML
<div id="image_frame">
<div class="shrinking_image"></div>
</div>
THE JQUERY
$(document).ready(function(){
$("#image_frame").hover(
function(){
$(this).find(".shrinking_image").addClass("image_frame_hover");
},
function(){
$(this).find(".shrinking_image").removeClass("image_frame_hover");
});
});
THE CSS
#image_frame {
width:167px; height:27px;
}
.shrinking_image {
background-image:url(http://i.stack.imgur.com/q9MCk.jpg);
background-repeat: no-repeat;
background-position:0px 0px;
overflow:hidden;
width:167px; height:27px;
}
.image_frame_hover {
overflow:hidden;
background-position:-70px 0px !important;
width: 24px !important;
}
See this code in action via jsfiddle here.
Basically, you are just using jQuery's hover() function to assign and un-assign a special css that uses the a combination of the css properties width, height and background-position to show only the parts of the photo you care about.
Hope this helps!
I'm trying to fit my 'body' background image to the browsers document size.
This code here doesn't change anything in browser when i run it... i see the image but it is repeated twice and the size isn't changing. when debugging i see that the width and height variables are correct but nothing actually happens.... any ideas?
$(function() { // onload...do
var width = $(document).width();
var height = $(document).height();
$('body').css.backgroundSize = "" + width + "px " + height + "px";
});
body{
background: url(../images/MainMenuScreen.jpg);
}
Try this:
#yourdiv /* with CSS 3 */
{
background: url(../images/MainMenuScreen.jpg) no-repeat;
background-size: 100%;
}
You can use the background-size:cover property. Using "background-size:cover" property will give you the following advantages:
1. It Fills entire page with image, no white space
2. Scales image as needed
3. Retains image proportions (aspect ratio)
4. Image is centered on page
5. Does not cause scrollbars
6. As cross-browser compatible as possible
Here is the css (if you want it to apply to the entire page) :
html {
background: url(../images/MainMenuScreen.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hope this helps
Using JS/JQuery how can I automatically change an image width/height based on a background DIV tag or window ?
You can use jQuery's width() function both to determine the width of the window and/or div, and also to assign the image's width:
var windowWidth = $(window).width();
$('img').width(windowWidth);
<div id="background-div">
<img src="xxxx.jpg" width="100%" height="100%"/>
</div>
For dynamic height you should see jQuery.height()
Using javascript you can change the height dynamically using this
var windowHeight = document.getElementsByTagName('body')[0].clientHeight;
document.getElementById("background-div").height = windowHeight + "px";
or
document.getElementById("background-div").style.height = windowHeight + "px";
For this you can use the jquery width() and height() methods or using css just specify the following rule.
img{ max-width:100%;}
Note that, this will set the dimensions of the image based on its parent div dimensions.
Have a look here http://www.cssplay.co.uk/layouts/background.html
It's a demo how to display and image with 100% width as a background .
I would use css for this.
CSS
.bg-Image {
background-image: url();
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: transparent;
width: desiredWidth;
height: desiredHeight;
}
HTML
<div class="bg-Image"></div>
Now you could even use jquery to dynamically change the background-image, width & height of the div.
background-size: contain;
does the trick.
But it is a css3 property. It will not work in <= ie8.