Suppose the image is 100w x 300h. But I have a div that is always 100x100. I want to center the image (so that the top and bottom get cut off)
Note: The height will always be variable. It's not always 300.
How can I do that in JQuery?
Why don't you just set the image as a background property of the div? Straight CSS solution, no js necessary:
.cutoffAndCentered { width: 100px; height: 100px; background: url('image.jpg') no-repeat center center; }
Or you can always do the same via jQuery:
$('.myDiv').css('background','url(image.jpg) no-repeat center center');
You should use display: table-cell and overflow:hidden;
This tutorial should help http://www.brunildo.org/test/img_center.html
Related
I used jquery-ui plugin to realize vertical slider function. I want to realize gradient effect, so I use background images, include bg/range and slide handle. The question is when I slide dot handle to bottom, bg image is compressed. Here is my example code.
jsFiddle
#head_slider .ui-slider-range {
background: url(https://image.ibb.co/hTvN6a/head_slider_h.png) 0px center no-repeat;
}
#head_slider_bg {
position: absolute;
width: 72px;
height: 704px;
right: 100px;
background: url(https://image.ibb.co/mUfpma/head_slider_n.png) center center no-repeat;
}
and the same way to horizontal slider is fine! That's confusing me. Thanks for your reading and help.
The problem is not that the background image is compressed, but the CSS rule border-radius applied to the verticle bar becomes different. When slider slides to the bottom, the height of the verticle bar is less then 60px (the value you set to border-radius), thus the actual border radius will be decreased.
A simple fix to this problem is add a min-height constraint to that element, which you can refer to the updated fiddle (add min-height: 60px at Line 79 of CSS).
For more detail about the behavior of browser handle border-radius, refer to Cornor Overlap section of specification.
I want to have a fullscreen div with a fullscreen centered background image :
#fullScreenHome {
background:url('home.jpg');
background-size: 100%;
background-position: center;
width: 100%;
height: 100%;
}
To keep the background centered this does apply an offset to the background image position.
I want to make the background image move on mousemove without losing the centering effect.
How do i get the offset value OR how to achieve the desired effect without knowing this value ?
Thanks !
The issue I’m having here is with the x-ray image behind the one in the front. They do not line up. It only does when i stretch the browser out to 1920px. Anything smaller than that causes it to misalign. Note that I purposely set the image to be at 100% width which I know is not responsive.
I want to keep the effect of the image getting cut off on the right and left of the browser. Ideally I'd like both images to be centered and aligned when I decrease the size of the browser.
Here is the Github link:
https://gist.github.com/siravani/71b8d447acaca8b34acfcab82af58c06
If you added a fiddle that would have been a lot easier but all you need to do is add background-size:cover to #flesh css rule
html, body, #flesh {
position: relative;
margin: 0;
height: auto;
max-width: 100%;
background: url("http://www2.yapstone.com/l/109192/2017-04-04/4c61s2/109192/37539/buildings.jpg") no-repeat;
background-position: center;
background-size:cover;
}
this way your background image will fit in container and will match with the original image.
Here is a working fiddle https://jsfiddle.net/w2jjaLn5/
How to target a specific location on the image to be cropped using css or javascript, simple way without big scripts,
Picture before :
I want the highlighted location on the following image to be viewed :
Not the exact highlighted though, just trying to explain it doesnt has to be from the very top, i want to select specific image scales,
AND how to resize is after cropping ?
Update 2022-05-27: A new property object-view-box will soon make this a lot simpler: https://ishadeed.com/article/css-object-view-box/
One approach is to use an element with overflow: hidden that has the image as a child, which itself is absolutely positioned within the context of the original element. The result being, the size of the overflow: hidden element masks the image.
Here's an example of the approach:
HTML
<div id='crop-the-cats'>
<img src='http://i.stack.imgur.com/ArS4Q.jpg'>
</div>
CSS
#crop-the-cats {
width: 100px;
height: 80px;
overflow:hidden;
position:relative;
}
#crop-the-cats img {
position: absolute;
top: -60px;
left: -70px;
}
See http://jsfiddle.net/Da9CT/
Another approach is to use the image as the background of the image and reposition it using background-position:
HTML
<div id='crop-the-cats'></div>
CSS
#crop-the-cats {
width: 100px;
height: 80px;
background-image: url(http://i.stack.imgur.com/ArS4Q.jpg);
background-position: -50px -60px;
}
See http://jsfiddle.net/Da9CT/2/
You can't crop image using javascript / css but you can position it inside an element with overflow hidden: http://jsbin.com/ebenem/1/edit
Let me know if that helps!
I'm trying out the jQuery Lavalamp menu and I'm trying to alter it and understand how it works at the same time. Thing is, all examples I've found consist of basically two images.
The background and the left image. That ok, but I want to create a menu where it consists of three images. The background, the middle and the left. And the middle should react in the same way as the left one, only be positioned in the middle of the menu item at all times.
Does anyone have any idea on what should be done to make this happen? I just need to somehow insert a static 15px div in between the structure.
Well, what they are doing is this:
Position the outer div under the list
Give it the image of the right and middle
Add a nested div, that is 100% of the width
Give that the left image, aligned left.
What you'll want to do is use 3 nested divs.
The outer div with the center/bg with background-position: center top;
The inner div with the left image with left top
The innermost div with the right image, background-position: right top;
I'll illustrate that in a moment...
[edit]
New markup in the js file:
<li class="back"><div class="left"><div class="right"></div></div></li>
New css:
.lavaLampWithImage li.back {
background: url("middle.jpg") no-repeat center top; // could be repeat-x
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("left.jpg") no-repeat left top;
height: 30px;
}
.lavaLampWithImage li.back .right {
background: url("right.jpg") no-repeat right top;
height: 30px;
}
[another edit]
I did not realize you wanted a static thing in the middle.
Since you have 2 nested divs right now, would it work to add a third, like above?
Only this time assign the innermost div a width of 15px and add margin: 0 auto;
Leave the other 2 as they are.
Since the other 2 divs are filling up 100% of the free space this should place the third div in the middle.