Center an element that is larger than 100% - javascript

I'm having trouble centering an image that's larger than it's parent element. I've set the min-width and min-height to 100% so that the picture will always fill up the parent element.
The visual problem appears when a image doesn't have the proportions of the parent element. The image is getting cropped too much on the right or bottom side.
I guess i could bypass this problem when i just center the images, so the most important part of the picture doesn't get cropped. Is there a way to center the image that's larger than it's parent element? (Without changing the parent element ofc)
I would rather see a css oriented answer instead of javascript because of performance issues when traversing a lot of images in the DOM.
Here's a part of a screenshot of two images contained in a parent http://d.pr/kEcb. The images sizes are ok, but i cannot get them centered

Try something to this effect.
img/div/whatever {
left: 50%;
margin-left: **Half of image width**
}

Use overflow property for the parent div
if you want to view the image coming out of the div use visible else use scroll

The simplest css solution would be to set the image as the background-image of the parent,
with {background-repeat:no-repeat;background-position: center center;}

Related

Z-Index not taking effect?

I'm trying to use a background image, with divs over the top of it. All the elements have position attributes and i've currently given the background image an opacity of 50% so that I can see behind it. The z-index of the div 'wrapper' is higher than the image but is still appearing behind. Also it's at the bottom of the page and I'd like it to appear at the top and have a height if 100%.
Here is an image of what i'm seeing currently:
As you can see the div is behind the image and can only be seen becuase of the image opacity.
Any help would be greaty appreciated, thank you.
It's because your #Page container has a z-index lower than the image, even though the wrapper has a z-index higher. The parent container's Z takes precedence.
Simply removing the z from your #Page will probably fix the issue (without having a fiddle to test that on, but pretty sure).
Additionally, you don't actually need z on all this stuff. You could take advantage of the normal stacking order of elements, with the elements lower down in the markup being stacked on top of earlier elements....
The z-index value of a child element only plays a role within the scope of its parent. In this case, #wrapper is inside of #Page and has a z-index of -1000 relative to #home-bg z-index of 2.

Changing DIV size vs Change its BG size (perfomance)

So, e.g. i have a div, i need to enlarge on mouseover.
I know 2 ways to do it:
a)actually to enlarge the DIV
b)Since I've heard of JS operating with
DOM is its main problem, it came to my mind, that we can create 2
DIVs, 1 stands for enlarged size, 2nd for minimized, BG size of
enlarged is equal to size of minimized DIV, e.g. 70%
On minimized DIV mouseenter - triggers function which set bg size to 100% of enlarged DIV's size
Scheme here: Bordered DIV - stands for Enlarged DIV, with 70% size of BG; minimized div has zero opacity, sized to image precisely
TL;DR
So which method is faster: operate with DIV's size itself, or operate with its css properties? Hope I describe my thoughts clear.
The most performant way for the browser is usually the css transform to make something bigger, since its hardware accelerated and doesn't conflict with the positioning of the DOM at all. it's also the easiest way to animate things :)
demo: https://jsfiddle.net/v0k69mq3/
html:
<div>foo</div>
css:
div:hover {
transform:scale(1.5)
}

Responsively Scaled Image in CSS

I'm creating a slideshow with jQuery Cycle, and I need to be able to resize the images in the slideshow responsively with css. So far, cycle has been so controlling of the width and height of the images that I haven't been able to do it. I have been able to achieve the images resizing according to window width when I refresh the page, but the images won't dynamically resize when resizing the window. I'm trying to work out a solution in Javascript, but I'd really like to be able to get away with pure css.
jQuery Cycle is setting widths inline on the <img> tags. That's the first problem. I would try removing that, it looks like the options for Cycle has this value slideResize, try setting that to false or 0.
The next step would be setting a max-width on the container, and width: 100% on the imgs.
Just a suggestion - but you'll probably want to use something like JavaScript (or an AJAX service or something) to handle this because if you were to handle resizing the images within the browser that is going to put an incredible amount of strain on the browser to handle all of the resizing and scaling.
You may want to target specific resolutions and serve the images based on the "closest" viewport size accordingly.
you can set the width or height of the image related to a container
.container{width:200px}.container img {width:100%}
Hope this helps!
Set the img elements width to 100% and height to auto to take aspect ratio into account. If you don't want the image to be 100% of the browser, add a container element.
Your best bet to make a image responsive, this is without it being inside a container btw.
img {
width: 100%;
height: auto;
}
Now, it will stretch to the width of the page, but if its contained it will stretch to the width of the container, the thing to try is, making the container grow and shrink as well.

Fitting HTML5 video to parent element size

I've got a <video> element inside a <div> that gets automatically resized when other elements on the page are dynamically resized / added / deleted.
I would like the video element to also automatically resize so that it always remains contained within its background div; this sort-of-works if I set the video element's CSS height & width to 100%, so it's always the same size as its container. However, if the containing div's dimensions go below the video image's inherent videoWidth or videoHeight, then it starts to behave as though the CSS height/width properties refer to percentages of the video image's inherent dimensions, not the container div! E.g., if the CSS height is 100%, it scales normally except that it has a minimum size of the video's inherent height; if the CSS height is 50%, it scales normally but with a minimum size of 50% of the video's inherent height.
I can fix this, sort of, by using JavaScript to periodically reset the video element's height in pixels to be the computed height of the container, but this is really slow and choppy. Is there any way to fix this in CSS so that the video element will size properly?
I am well aware this is an older question, but I have been struggling with accomplishing a layout with CSS where a video is automatically sized to fit some box, typically within parent element.
Just using width and height with static positioning only works in certain configuration of parent-child topologies, and also depends a lot on how the topology is styled. Even if you get some element to properly calculate its boundaries, once you put a playing video element inside it, it will expand the parents allowed box, even though that is the least sensible behavior you'd expect.
Throw in some fieldset elements, and you're in the rabbit hole of CSS and browser peculiarities.
What I have found out is that it was easiest to just take the video element out of its positioning context, using position: absolute. It doesn't mean that it won't visually well-behave -- using width: 100% and height: 100% effectively makes it properly constrain itself as it otherwise should (but wouldn't). You would then need to add position: relative to appropriate ancestor element of the video element, otherwise the video will be absolutely positioned in relation to document root, which is most likely not what you'd want.
Omitting left and right works because absolute positioning does not reset the position, just switches the calculation method. You could alternatively set both properties to zero, you'd get your video aligned to the offset parent top-left corner then. max-width and max-height are unnecessary -- I just have seen these being thrown in in a lot of cases where people struggle with constraining their video elements -- don't bother.
You can specify background color for either the video element or its offset parent. That way you will get the letter-boxing effect -- say, black bars on the sides of the video.
As your video is inside a div, this can be solved by setting both width and height of the video to 100%. This makes the video occupy 100% of the div element.
Markup example:
<div id="video_container">
<video></video>
</div>
Stylesheet:
#video_container video {
width: 100%;
height: 100%;
}

Dynamically, add overlaping divs over each element (div, image, span,...) with specified class name (jQuery)

I want to write a jQuery plugin with some visual effect for selected divs.
Integrating a plugin would look like so:
$('.myclass').mypluginfunction();
Visually it would be a transparent div over the whole element, with moving background.
Is it possible to dynamically add divs without destroying e.g floated divs?
I know that the solution would be adding an absolute position to div with bigger z-index.
You don't even need to tinker with the z-index. An element lower in the source will overlay content before it. Set your elements to position: relative and append an absolutely positioned div with width and height set to 100% - this will effectively overlay it.
Get yourself Chrome (or Firebug) and play with $.append() in the console:
$('*').css('position', 'relative').append('<div style="position:absolute; width:100%; height:100%; background: #F00; opacity:0.5;"></div>');
This will position every element on your site relatively, then append an absolutely positioned div with a red background. You should see every single element on your site being overlayed by it.
Of course this is going to explode, a little, but it gives you an idea of how easy to use this technique is.

Categories