I want to display the following image centered:
I have the following style item:
var itemStyle = {
display: 'block',
width: this.computeWidth(),
height: '250px',
backgroundImage: 'url(' + imageLocation + ')',
backgroundPosition: 'center !important',
backgroundSize: 'cover',
boxShadow: '10px 10px 5px #888888',
borderRadius: '15px',
marginLeft: 'auto !important',
marginRight: 'auto !important'
};
Which I display like this:
<div style={itemStyle}>
</div>
this.computeWidth() is this method, where I resize the width of the image depending on the page:
computeWidth: function() {
console.log("this.state.window.width: " + this.state.window.width);
if(this.state.window.width > 350) {
return '250px';
}
return Math.floor(0.7 * this.state.window.width).toString() + 'px';
},
I also tried computing marginLeft and marginRight using this method:
computeMargin: function() {
if(this.state.window.width > 350) {
return 'margin-auto';
}
return Math.floor(0.15 * this.state.window.width).toString() + 'px';
},
However, the image was not centered again.
So how can I make sure that the image is central to the page?(preferably without changing the css of the component containing it)
What's wrong with margin: Xpx auto? It should work, because the image as defined width. Alternatively, you can add flexbox properties to the parent in order to center the child:
.parent {
display: inline-flex;
justify-content: center;
width: 100%;
}
CSS should be enough to solve this problem. Wrap the image in a div and center that with margin property.
<div class="img-wrap">
<img src="foo.jpg">
</div>
.img-wrap { margin: 0 auto; }
Refer here for more detail: CSS-Tricks centering guide
Edit
- For centered background image apply the following CSS to the div:
background-image: url("foo.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain; /* Full image in div, no cropping, preserve aspect ratio */
This centers the image by moving the image's center halfway along both axes (x and y) in the div. Thus, perfect centering.
Alternatively, use this for hero images:
background-size: cover; /* Fill div (even if img is cropped), preserve aspect ratio */
More for background centering: Sitepoint: background-position property
Related
I have a background image that I want to cover my entire screen minus the header. I also don't want my background image to scroll. It should not move as the user scrolls over content.
For this reason I use the following to place my background:
<div
className={style.app}
style={{
backgroundImage: `url(${HomePhoto})`,
backgroundRepeat: "no-repeat",
backgroundAttachment: "fixed",
}}
></div>
I am attempting to add additional CSS properties to assume the proper height and width are used:
height: 100vh;
width: 100vw;
margin-top: 4rem;
background-size: 100% 100%;
However the margin-top is not applied unless I remove backgroundAttachment: "fixed". Is there a way I can achieve both styles?
You can use the backgroundPosition property which allows you to move a background image around in its container: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
<div
className={style.app}
style={{
backgroundImage: `url(${HomePhoto})`,
backgroundRepeat: "no-repeat",
backgroundAttachment: "fixed",
backgroundPosition: "100px 0", // or vh
}}
></div>
So I'm working on a gallery where images are shown in a 200x200px list item
#gallery-list-ui li {
display: block;
margin: 10px;
height: 200px;
width: 200px;
overflow: hidden;
}
In order to have portrait / landscape images use the entire height/width, I'm using javascript to decide if I should set either height or width to 100%.
var portrait = ($img.height() > $img.width() ? true : false);
if(portrait){
$img.css({'width' :'100%', 'height' : 'auto'});
} else {
$img.css({'height' :'100%', 'width' : 'auto'});
}
The result is that portrait images scales correctly
<img src="img.jpg" style="width: 100%; height: auto;">
but landscape images scales 100% of its original height and is not limited to the height of the list box.
<img src="img.jpg" style="height: 100%; width: auto;">
What am I missing here? Can anyone explain why this is happening?
See my fiddle here: https://jsfiddle.net/smyhbckx/5/
Add height to .img-container:
.img-container{
height: 100%;
}
CSS height is very strict. It is based on the element's direct parent's height. The direct parent of the img is .img-container - which doesn't have a height (meaning height: auto;). The parser recognize this as an unknown number, and thus your img height is not scaled.
Try with object-fit:cover;height:100% property on image and also add following styling to container
.img-container {
width: 200px;
height: 200px;
}
I hope this will solve your issue
https://jsfiddle.net/smyhbckx/7/
I have a div that has a fixed size of 500x500. Inside this div I have an image tag which can be dynamic. Meaning that it can have a size of a square, a rectangle (width > height), or a vertical rectangle (height > width). The issue is that I don't want this image to be squished, I wanted to keep the aspect ratio of the image. So say the image size is 1000x250, then I want it to be resized as 500x125 and then centered on this 500x500 box. If the size is 500x1000 then we wanted it to be resized as 250x500 and then centered with white spacing on the left and right.
Is there an easy way to do this using purely css or do I need javascript in order to do this? and how?
Here's the structure of what I have now:
<div class="product-large" style="position: relative; overflow: hidden;"><img src="/images/store_logos/9ae3d8f75c80d5a48bf59f975e8450c9e8b7a9d9.jpeg" alt=""><img src="/images/store_logos/9ae3d8f75c80d5a48bf59f975e8450c9e8b7a9d9.jpeg" class="zoomImg" style="position: absolute; top: -236.43249427917618px; left: -188.05491990846681px; opacity: 0; width: 1024px; height: 714px; border: none; max-width: none;"></div>
Updated for vertical centering - jQuery required.
HTML
<div class="product-large">
<img src="image1.jpg">
</div>
<div class="product-large">
<img src="image2.jpg">
</div>
CSS
.product-large {
width:500px;
height:500px;
border:1px red solid;
position:relative;
}
.product-large img {
max-width:500px;
max-height:500px;
width:auto;
height:auto;
position:absolute;
top:50%;
left:50%;
}
Javascript (jQuery)
$(".product-large img").each(function () {
//get height and width (unitless) and divide by 2
var hWide = ($(this).width()) / 2; //half the image's width
var hTall = ($(this).height()) / 2; //half the image's height, etc.
// attach negative and pixel for CSS rule
hWide = '-' + hWide + 'px';
hTall = '-' + hTall + 'px';
$(this).addClass("js-fix").css({
"margin-left": hWide,
"margin-top": hTall
});
});
New Fiddle: http://jsfiddle.net/Asvdk/2/
I think you can do:
#conatiner {
line-height:500px;
height:500px;
width:500px;
}
#img {
max-width: 100%;
max-height:100%;
display: block;
margin: 0 auto;
vertical-align: middle;
}
minimal partial example here: http://jsfiddle.net/cahs4/
I didn't do the vertical alignment but you can see what I mean
If you're consider to use jQuery, then you can have a look at the ImgCenter jQuery plugin here.
I'll start with JS Fiddle:
http://jsfiddle.net/zy2xy/4/
<div id="page" style="position: relative; background: #ccc; width: 500px; height: 600px;">
<div id="container" style="top: 50px; left: 100px; width: 200px; height: 200px; position: absolute; background: #fff;">
<img src="http://lorempixel.com/200/100/">
</div>
</div>
I've got a whole page div #page, and inside that another div #container positioned absolute against #page.
What I want to achieve, is to rotate image inside it 90deg, 180deg or 270deg but always move that image to top left corner of #container.
I tried a little bit with transform-origin but I couldn't find any solution.
Set the position:absolute to the image
Then calculate the angle.. If it's 90 or 270 then set the left and top attributes for the image.
Code
$('a').click(function(e) {
e.preventDefault();
var angle = $(this).attr("id");
console.log("angle");
var $container = $('#container');
var left = 0;
var top = 0;
if(+angle === 90 || +angle === 270){
top = 50;
left = -50;
}
$("#my_image").css({
transform: 'rotate('+angle+'deg)',
'-moz-transform': 'rotate('+angle+'deg)',
'-webkit-transform': 'rotate('+angle+'deg)',
'top' : top + 'px',
'left' : left + 'px'
});
}).click(); // Fire click on DOM ready
Check Fiddle
Is there a way (without binding to the window.resize event) to force a floating DIV to re-center itself when the browser window is resized?
To help explain, I imagine the pseudocode would look something like:
div.left = 50% - (div.width / 2)
div.top = 50% - (div.height / 2)
UPDATE
My query having been answered below, I wanted to post the final outcome of my quest - a jQuery extension method allowing you to center any block element - hope it helps someone else too.
jQuery.fn.center = function() {
var container = $(window);
var top = -this.height() / 2;
var left = -this.width() / 2;
return this.css('position', 'absolute').css({ 'margin-left': left + 'px', 'margin-top': top + 'px', 'left': '50%', 'top': '50%' });
}
Usage:
$('#mydiv').center();
This is easy to do with CSS if you have a fixed-size div:
.keepcentered {
position: absolute;
left: 50%; /* Start with top left in the center */
top: 50%;
width: 200px; /* The fixed width... */
height: 100px; /* ...and height */
margin-left: -100px; /* Shift over half the width */
margin-top: -50px; /* Shift up half the height */
border: 1px solid black; /* Just for demo */
}
The problem, of course, is that fixed-size elements aren't ideal.
The simplest way would be with the following CSS code:
#floating-div {
width: 50%;
border: 1px solid gray;
margin: 0 auto;
}
The key line of CSS code above is the "margin: 0 auto;" which tells the browser to automatically set the left/right margins to keep the div centered on the page, even when you resize the browser window.
Try this little article about Horizontal and Vertical centering. It is a little old and has a few hacks but you should be able to work out some test code from it.