jQuery .animate animates the div but not the image inside - javascript

When I animate a div using jQuery, the div gets bigger, but the picture inside of it stays the same size.
How to I make the div, as well as the image inside of it, get bigger but remain to scale?
Do I actually have to address everything that is in the stylesheet, in the .animate() method? Not just width and height? If so, how do I manipulate the url("someImage.jpg") that is in the stylesheet.
Here is some sample code that illustrates what I am talking about:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#one { /* Second info block */
float: right;
height: 350px;
width: 275px;
border: 1px solid black;
border-radius: 5px;
margin-left: 10px;
margin-top: 35px;
margin-right: 175px;
background: url(http://magazine8.com/wp-content/uploads/2014/02/most-beautiful-flowers.jpg) no-repeat;
background-size: 300px;
background-position: center;
}
</style>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="one"></div>
<script>
$("#one").click(function() {
$(this).animate({
width: "500px",
height: "700px",
}, 1000);
});
</script>
</body>
</html>

I think you want something like this:
Just increase your background-size: xx px; or (backgroundSize:"xx px") along width & height changes.
$("#one").click(function() {
$(this).animate({
width: "500px",
height: "700px",
backgroundSize: "500px",
}, 1000);
});
#one {
/* Second info block */
float: right;
height: 350px;
width: 275px;
border: 1px solid black;
border-radius: 5px;
margin-left: 10px;
margin-top: 35px;
margin-right: 175px;
background: url(http://magazine8.com/wp-content/uploads/2014/02/most-beautiful-flowers.jpg) no-repeat;
background-size: 300px;
background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="one"></div>
Note : I have just randomly added 500px, change as per your requirement.

You've set a fixed background size of 300px so it's not going to change whatever size the containing div is. Try this in your CSS:
#one {
/* your styles */
background: url('http://magazine8.com/wp-content/uploads/2014/02/most-beautiful-flowers.jpg') no-repeat;
background-size: contain;
background-position:
}
Setting the background size to contain will make the image always as large as possible to fill the container, while maintaining the original aspect ratio.
Edit
Since your preferred scale isn't 100%, you can use a percentage size. About 110% is what you're looking for to keep the same scale.
background-size: 110%;
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Related

To crop/resize an image to change the aspect ratio using CSS

I have an image of size 700px(width) x 333px(height) which have aspect ratio 2.10. I want to display this image in size 327px(width)and 183px(height) with aspect ratio 16:9.The original images could be cropped or resized with minimum distortion and final aspect ratio of each element should be 16:9 and displayed as 327px(width)and 183px(height).Following is the code I tried.
object-fit: cover; works fine, it crops and resizes the image to size 327px X 183px but it is not supported on all/older browsers versions. What could be an alternative to achieve the same result through CSS supported on all and older browsers?
/*original image : http://starmoz.com/images/lancia-gamma5.jpg */
.cropAndResize {
width: 327px;
height: 183px;
object-fit: cover;
}
<body>
<div>
<img src="http://starmoz.com/images/lancia-gamma5.jpg" class="cropAndResize">
</div>
</body>
For crop purpose I often make use of background-image on a element of type block or inline-block instead of relies on img tag:
.cropAndResize {
width: 327px;
height: 183px;
background-size: cover;
background-position: 50% 50%;
background-image: url('http://starmoz.com/images/lancia-gamma5.jpg');
}
<body>
<div class="cropAndResize"></div>
</body>
One simple solution could be:
.cropAndResize {
height: 183px;
margin-left: -20px;
}
div {
width: 327px;
overflow: hidden;
}
Maybe something like this could work for you? The only caveat is you need to set a specific margin to align the image within the container to center it.
.crop {
width: 327px;
height: 183px;
overflow: hidden;
position: relative;
border: 1px solid black;
}
.cropAndResize {
position: absolute;
min-width: 100%;
max-height: 100%;
margin: 0px 0px 0 -20px;
}
<body>
<div class="crop">
<img src="http://starmoz.com/images/lancia-gamma5.jpg" class="cropAndResize">
</div>
</body>

Div same size as background image

So i have a div with a background image and i would like to make the div same size as the background image when i resize the window, so i can place some text in the center of it and i want to image to be responsive and so the div also.
my html for the image and text:
<div id="headerimg" class="header">
<h1>Welcome to my website</h1>
</div>
and my cc for it so far:
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: cover;
width:100%;
}
.header{
height: 700px;
width: 100%;
margin: auto;
padding: 20%;
color: white;
text-align: center;
font-size: 50px;
}
i am just using a random image from google atm, ill replace later; but anyway.. how can i get the height to align whenever? Jquery maybe? -but im not realy familiar with jquery much...and yes, i want the div to be full width of the site all the time.
Would something like the following work for you:
https://jsfiddle.net/44k0320v/
I've updated your header width to use 50vw units, your example image has an aspect ratio of arount 2:1 meaning that if you want the div to maintain the correct height you need to set the height to be half of the viewport width (the measurement across the width of the screen is 100vw).
I have also updated the background image to have a size of 100% rather than cover so it's width will scale with the div.
I've also updated the font size to also use vw units.
New css below:
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: 100%;
}
.header{
box-sizing: border-box;
height: 50vw;
width: 100%;
margin: auto;
padding: 10% 20%;
color: white;
text-align: center;
font-size: 3.5vw;
}
A similar solution to jazibobs, also using the vw height but with more "flowy" text. Currently the background will respond to pretty much any width however at narrow widths it doesn't really make much sense with the text. For this you could use media queries to possibly even hide the background at smaller widths or just set the text smaller.
https://jsfiddle.net/kzhzasot/
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: 100% auto;
width: 100%;
height: 100vh;
}
.header{
margin: 0px;
padding: 0;
color: white;
text-align: center;
font-size: 50px;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
}

Issues getting a background image to appear

I am unsure of why I cannot get a background-image to appear in the following snippet. The url is correct and I have set size to the image. Also, how can you align a background-image in the center of a page? I know there are properties like right top, but I do not see one for center vertically and horizontally.
Thanks.
$("#arrow-icon").slideToggle(1000);
.arrow {
height: 400px;
width: 100%;
background-color: blue;
text-align: center;
}
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
<div id="arrow-icon">
<!-- <img src="http://optimumwebdesigns.com/icons/down-arrow.ico"> -->
</div>
</div>
The problem is that the div is smaller that the picture.
You can get around this with the background-size property
Example:
#arrow-icon {
padding-top: 100px;
display: none;
background-image: url("http://optimumwebdesigns.com/icons/down-arrow.ico");
background-repeat: no-repeat;
height: 50px;
width: 50px;
background-size:100% 100%;
}
fiddle - https://fiddle.jshell.net/800modgt/
Or you can change the div width and height to the image width and height...
And in terms of centering, simply use:
background-position: center;
That said, I'm noticing that it's not center on the page on the Fiddle previously posts. You can use
margin:auto;
to center a <div> horizontally
You might consider for the positioning using CSS3 for positioning, as it's very versatile in changing position of a div and how far it slides out. Here is a JSFiddle. It's for side animation, but it will work for just a standard up/down, too.
https://jsbin.com/yovaqo/edit?html,css,js,output

Why can't I specify div height in percentage using CSS classes when using jQuery for resizing?

I want to make the div 30% of the height of the window and then on click make it 90%. The thing is I'm only being allowed to specify widths in percentages but with height it breaks unless its px. Any thoughts? Here's a link:
http://codepen.io/chris86/pen/avvWwJ
Here's the html:
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<div id="button" class="banner" value="Switch Class"></div>
Here's the CSS:
.banner {
background-color: #c3c3c3;
height: 100px;
width: 50%;
padding: 0;
margin:0 auto;
}
.bannerbig {
background-color: #000000;
height: 200px;
width: 80%;
padding: 0;
margin:0 auto;
}
And the jQuery:
$(function() {
$('#button').click(function(){
$(".banner").switchClass("banner","bannerbig",'fast');
$(".bannerbig").switchClass("bannerbig","banner",'fast');
return false;
});
});
The reason your code breaks is because using percentage as the value for height or width is dependent on the height of the parent. As far as the DOM is concerned, the only element that has absolute height / width by default is the document object.
So, you have to specify the first DOM elements which don't have absolute height by default as a percentage of the document's height, like so:
html, body {
height: 100%;
}
Then use the appropriate percentage heights for your .banner and .bannerbig classes in CSS:
.banner {
background-color: #c3c3c3;
height: 30%;
width: 50%;
padding: 0;
margin:0 auto;
}
.bannerbig {
background-color: #000000;
height: 90%;
width: 80%;
padding: 0;
margin:0 auto;
}
Hope this helps.

align texts or images in Bootstrap carousel

I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel.
here is a exemple from a slider. How can I align text like this and stay at any screen resolution at the same place. I use top: x, right: x but every time when I resize the window, text climb above and not stay at middle anymore.
CSS for align
.carousel-caption {
position: absolute;
right: 15%;
bottom: 40%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
Just basic bootstrap slider. But If I use bottom 40% for exemple to rise text at middle of the page works. But if I use smaller displays the text rise and stay almost on top.
In this exemple text stay fixed on every device.
<div class="wrap">
<div class="display-table">
<div class="display-cell">
<h1>Title in here</h1>
</div>
</div>
</div>
<style>
.wrap {
width: 100%;
height: 400px;
}
.display-table {
width: 100%;
height: 100%;
display: table;
}
.display-cell {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
</style>
This allows fixed vertical alignment and should work cross browser. Just note the fixed height applied to .wrap must be present for the children to inherit 100% height!
Hope this helps :)
Hope, Try this demo that centers text vertically in the Bootstrap carousel.
Here is the Fiddle.
All I do here is give the div a height that contains the text and then position it with this css...
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}

Categories