I want to display images on a .net page which I load from database (the amount can thus vary). All images have different widths and heights up to 130px and 60px respectively. I want to put the images into container elements with a fixed width of 130px and a fixed height of 60px. The images should be centered vertically and horizontally. The container elements should be aligned horizontally if possible.
I tried div (with float) and span. With div, I get the fixed sizes, but cannot center the images. With span, I can center, but not set any size. If I put span into div, it seems to behave like div (centering is ignored).
You can see it work on http://jsfiddle.net/km5dk/8/
But I think you search something like this.
### HTML ###
<div id="container">
<div class="image-container">
<img src="#" alt="A image" />
</div>
</div>
### CSS ###
#container {
width: 130px;
height: 60px;
display: table;
background-color: #ccc;
}
#container .image-container {
text-align: center;
vertical-align: middle;
display: table-cell;
}
#container .image-container img {
max-width: 160px;
max-height: 60px;
}
make image center
.image-container {
width: 500px;
height: 500px;
position: relative;
}
.image-container img {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
auto-resize an image to fit a div container
.image-container img {
max-height: 100%;
max-width: 100%;
}
Thinking a little outside of the box (excuse the deliberate pun!) you could use background-size on your container's CSS rule, and background-image: url(this_image.jpg); as an inline style on the individual containers themselves.
This would handle all of the scaling for you in a smaller and neater package.
Setting background-size: cover; would scale the image so that the smallest dimension matched (though there may be some cropping), and background-size: contain; would ensure the entire image fitted.
It's another option...
Danny
Use positioning. The following worked for me:
div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
With Bootstrap 3 you can add an img-responsive center-block class to center an image
<img class="img-responsive center-block" src="my_image.png" />
if you have an IMG tag inside the divs, use margin: 0px auto on the div css;
For vertical:
display: table-cell; vertical-align: middle;
I'm still learning myself just started doing HTML/CSS about two weeks ago, but this seems to work great has hover, click, description box, title box, and centered image.
You can put the CSS code in a separate style sheet as well. I thought I'd keep them together for the post.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:black;
color:white;
}
#container
{
width:18em;
height:18em;
}
#title-image
{
background-image:url('http://www.gravatar.com/avatar/cd1954c9caf7ffc02ab18137967c4bc9?s=32&d=identicon&r=PG');
background-repeat:no-repeat;
background-position:center;
border:1px solid RGBa(255, 255, 255, 0.1);
background-color:RGBa(127, 127, 127, 0.1);
color:#CFCFCF;
width:10em;
height:10em;
margin-left: 3.9375em;
margin-right: 4em;
text-align:center;
display: block;
}
#title-image:hover
{
border:1px solid RGBa(255, 255, 255, 0.15);
background-color:RGBa(127, 127, 127, 0.15);
color:#FFFFFF;
}
#description
{
width: 18em;
border:1px solid RGBa(255, 255, 255, 0.03);
background-color:RGBa(127, 127, 127, 0.03);
text-align:center;
display: block;
}
</style>
</head>
<body>
<div id="container">
This is your Title?
<p id="description">Your description<br>Can go here.</p>
</div>
</body>
</html>
Mr Lister:
IMHO for vertical you have to add display: table; to d parent & specific height, for example:
.parent {
display: table;
height: 100vh;
position: fixed;
}
.parent .child {
display: table-cell;
vertical-align: middle;
}
Related
Building an image slideshow, I have a container div of arbitrary size and aspect ratio into which I have to best fit an image, centred, with a caption overlayed at the bottom of the image and fitting its width. My best solution to date is to contain the image and the caption in a child element of the container but I'm having trouble centring it. This should be such a simple thing that I can't believe it's not staring me in the face but I can't see it. The code below uses a portrait format image but I need it to handle landscape also. I'm using React so jQuery is out.
.container {
position: relative;
width: 80%;
height: 48vw;
/* 4:3 */
margin: 0 auto;
display: flex;
justify-content: center;
}
.img-wrap {
background-color: #efe;
}
img {
position: absolute;
max-width: 100%;
max-height: 100%;
}
.caption {
position: absolute;
bottom: 0;
color: #fff;
background-color: rgba(153, 153, 153, 0.541)
}
<div class="container">
<div class="img-wrap">
<img src="https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-full-aesthetic-aurora-night-sky-background-skystarry-skystarnight-viewbackgroundstar-image_87582.jpg" height="1600px">
<div class="caption">Caption Content</div>
</div>
</div>
Update your code like below:
.container {
width: 80%;
height: 48vw;
/* 4:3 */
margin: 5px auto;
text-align: center;
}
.img-wrap {
background-color: #efe;
height: 100%;
display: inline-block;
position: relative;
}
img {
max-width: 100%;
height: 100%;
display: block;
object-fit: contain; /*or cover if you want to cover all the area*/
object-position: bottom;
}
.caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
color: #fff;
background-color: rgba(153, 153, 153, 0.541)
}
<div class="container">
<div class="img-wrap">
<img src="https://i.picsum.photos/id/10/400/600.jpg">
<div class="caption">Caption Content</div>
</div>
</div>
<div class="container">
<div class="img-wrap">
<img src="https://i.picsum.photos/id/10/600/300.jpg">
<div class="caption">Caption Content</div>
</div>
</div>
don't position absolute the image,
also if the caption is the sibling of the image,
set the size of the parent and set the image as 100% if the parent's width and height
then you can simply use the text-align: center on the caption to center it.
edit :
keep the existing style of a caption for positioning
fiddle : https://jsfiddle.net/hellooutlook/6ep4Lofz/4/
I'm playing around with basic divs and testing my code locally and I'm stumped as to why my first div's CSS is not displaying. I'm not sure what I'm doing wrong as my second div seems to be displaying fine.
I am trying to have my second div centered directly in the middle of my second div, with the first div with a simple colored bg.
div#banner {
background-color: rgb(52, 72, 94);
height: 100%;
width: 100%;
position: relative;
}
div#bannerbox {
margin: 0px auto;
height: 50%;
width: 50%;
text-align: center;
}
<div class="banner">
<div class="bannerbox">
testing
</div>
</div>
You are targeting id's but in HTML you use classes.
Do CSS like this
.banner {
background-color: rgb(52, 72, 94);
height: 100%;
width: 100%;
position:relative;
}
.bannerbox {
margin: 0px auto;
height:50%;
width: 50%;
text-align: center;
}
I am trying to get an image horizontally and vertically centered within a div of variable height and width.
So far, so good.(See jsfiddle links below)
Now the catch is the image should also be responsive and adjust if either the height and/or width of the container is smaller than the images height or width.
After researching, going through all the different "solutions" out there and fiddling for a solution, I was unable to find the perfect one, however two came close:
1.) This first one does everything I need except when the window width is smaller than the image width, the image is no longer horizontally aligned:
http://jsfiddle.net/me2loveit2/ejbLp/8/
HTML
<div class="overlay">
<div class="helper"></div>
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
CSS
.helper {
height:50%;
width:100%;
margin-bottom:-240px;
min-height: 240px;
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display: block;
}
2.) This second example keeps everything aligned, but the image does not scale down when the height is less than the image height:
http://jsfiddle.net/me2loveit2/ejbLp/9/
HTML
<div id="outer">
<div id="container">
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
</div>
CSS
#outer {
height:100%;
width:100%;
display:table;
position:fixed;
top:0px;
left:0px;
background-color: rgba(0, 0, 0, 0.5);
}
#container {
vertical-align:middle;
display:table-cell;
max-width: 100%;
max-height: 100%;
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display:block;
}
I have attempted this in the past and the only non-JS solution I've come up with (which is frowned upon, by the way) is this:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: table;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid #f00;
}
.container > div {
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid #00f;
max-width: 550px;
max-height: 480px;
background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat;
background-size: contain;
}
<div class="container"><div></div></div>
http://jsfiddle.net/pYzBf/1/
Set the background color of the div to black to see the scaling without the image edges. I used those dimensions so you can test it by resizing the frame.
I'm trying to position an image inside its container. Because the container has overflow:hidden, it is hiding half of the image — I would like to add bottom: 50%, so it shows the center of the image.
At the moment, if I do so, you see a gap between the image and its parent. Would anyone know how to position this, so you get to see the center of the image?
http://jsfiddle.net/tmyie/RGfdh/1/
<div class="img-ctnr-med">
<a href="#">
<img src="http://placehold.it/200x200" alt=""/>
</a>
</div>
img {
background-color:grey;
display: block;
position: absolute;
}
.img-ctnr-med {
width: 100px;
height: 100px;
border: 1px solid blue;
position: relative;
overflow: hidden;
}
It should be bottom: -50% instead, so it shifts the image 50% of the height of the container down towards the bottom edge of the container rather than up away from it.
When specifying values for top, right, bottom and left, positive values shift an element away from the respective side and negative values shift an element towards the respective side.
I think the best way to do this is to include the image as background image. It is cleaner then moving around elements. See this Fiddle as example.
html:
<div class="img-ctnr-med">
link text
</div>
css:
img {
background-color:grey;
display: block;
position: absolute;
bottom: 30px;
}
.img-ctnr-med a {
width: 100px;
height: 100px;
color: transparent;
text-indent: -9999px;
display: block;
border: 1px solid blue;
position: relative;
overflow: hidden;
background-image: ;
background-size: auto;
background-position: center;
background-repeat: no-repeat;
}
Modify
img {
background-color:grey;
display: block;
position: absolute;
}
To
img {
background-color:grey;
display: block;
position: absolute;
left: -50%;
top:-50%;
}
I want to have a background image stretched vertically and positioned center of page.
I thought it would be simple, but it seems I cannot center it in any way. Here is my CSS code:
HTML
<div id="background">
<img src="bkg.jpg" class="stretch" />
</div>
CSS
#background {
width: auto;
height: 100%;
position: fixed;
z-index: -999;
}
.stretch {
width: auto;
height: 100%;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #525252;
}
Do you have any ideas how I can have this background centered? It's now aligned to the left. Thanks!
This works how you want it.
It stretches the image vertically and positions it in the center.
jsFiddle here
body {
margin:0px;
background-color: #525252;
}
#background {
width: 100%;
height: 100%;
position: fixed;
background: url('bk.jpg') center / auto 100% no-repeat;
}
Alternatively, if you want support for older browsers, see this jsFiddle solution. It uses the img tag as opposed to setting the image via background-image.
Try doing this:-
body {
margin: 0px auto;
width:1000px;
background-color: #525252;
}
OR
In this case you need to remove "position: fixed;":
#background {
height: 100%;
z-index: -999;
margin: 0px auto;
width:1000px;
}
You need to give some fixed width to body or the DIV.
Hope this helps!