I want to position an image into a center square and fill in the remaining space with colour. With the below code though, my image is on top and the text "test" is right below the image. I want the text to be outside the 120x120 square.
I tried the below code:
CSS (included in head):
.img-container {
width: 120px;
height: 120px;
display: inline-block;
overflow: hidden;
background-color:#000;
}
.img-container img {
width: 100%;
height: 100%;
}
HTML:
<a class="img-container" href="http://google.com"><img src="http://couponcoupon.biz/image/logo/landmsupply.com.jpg" /> Test </a>
Look at this article: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
It has a great breakdown of absoulte center:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
A fiddle with it applied to your example: http://jsfiddle.net/bhlaird/XgNXa/
I also moved the text down with a negative bottom: setting. I'm not wild about it, I'd add a wrapper div around the img-container a to have the text below it, but I didn't want to change your markup too much.
.img-container span {
position:absolute;
bottom: -20px;
left:0;right:0;
}
Wrap your text in a <span> then use CSS to move it around
Make sure your .img-container has position:relative; set and remove overflow:hidden;, then do this
.img-container span {
position:absolute;
left:125px;
your text will be wherever you want it.
As for the image being in the center. If it is a dynamic image (changing all the time) You will have to either experiment with display:table-cell or look into some javascript. If the image is the same one every time, you can just position it inside your img-container with position:absolute, top:45px or wherever center is.
First off, there's a typo in your example
height: 100%px;
this must be either 100% or 100px, but not both.
You can use background-image and background-position to center the image
CSS:
.img-container {
width: 120px;
height: 120px;
display: inline-block;
background-image: url(http://couponcoupon.biz/image/logo/landmsupply.com.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color:#000;
}
To move the text below the square, remove overflow: hidden and add a margin to a wrapper around the text
HTML:
<a class="img-container" href="http://google.com">
<div class="center">Test</div>
</a>
CSS:
.img-container .center {
margin: 120px 45px;
}
Complete JSFiddle
Related
I have an image inside of a div to put a button on the image. I've searched around the web but can't find any way to center the image.
I've tried making it it's own class and centering the img tag itself, but none of them seem to work.
<div class="container">
<img src="https://cdn.discordapp.com/avatars/543553627600584735/470015f633d8ae88462c3cf9fa7fd01f.png?size=256" alt="utili">
Utili
</div>
The image should be centered in the middle of the page, so I can line up 3.
In HTML:
<img src="paris.jpg" alt="Paris" class="center">
To center an image, set left and right margin to auto and make it into a block element:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
So, you can center any image while its inside a div. I hope this might help you.
You could position the .btn absolute to the relative container. If you know the size you want your image, even better.
How I would attempt to achieve it:
.container {
position: relative;
height: (the height of your image);
width: (the width of your image);
}
img {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.btn {
position: absolute;
bottom: (however far you want it from the bottom in pxs - so lets say 10px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
I'm a beginner in HTML coding and I'm trying to display just a part of an image. I'm displaying the image this way:
<img id="theImg" style="width:100%;" src="https://'myimage.jpg'" />
but I really don't know how to display just bottom left quarter of the image. It is even possible without making a new picture with the cropped image?
If you know the size of your image, you can put it into a container which has half the width and height of the image and use position: absolute; and the settings shown below:
.container {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
bottom: 0;
left: 0;
}
<div class="container">
<img src="http://placehold.it/600x400/fa0" />
</div>
You can just use a div element that has a background image and then just apply a few css changes to that div like so:
#theImg {
height: 200px;
width: 200px;
display: block;
background-image: url('https://myimage.jpg');
background-position: bottom left;
}
JsFiddle: https://jsfiddle.net/kekwdy2L/3/
Use background-image with background-position:
#my-image {
background-image: url('https://i0.wp.com/lovecuteanimals.objects.cdn.dream.io/wp-content/uploads/2016/01/Cute-Netherland-Dwarf-Rabbit.jpg?w=1160');
background-position: -220px -80px;
display: inline-block;
width: 200px;
height: 200px;
}
<div id="my-image"></div>
<style>
div {
height: height you want;
width: width you want;
background-image:url("image you want");
</style>
<div class="div"></div>
If you know the size of the image in pixels, you can use a css clip.
Note, clip is officially deprecated in css specification, however its replacement clip-path currently has very low browser support.
Another way of achieving crop is placing the <img> tag within a <div> as shown in this answer.
I want to center an full screen image vertically.
I can't define image in CSS because the image depends on URL parameters.
<div>
<img src="photo.jpg">
</div>
div {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
If I define my image CSS like this:
div img {
width: 100%;
height: 100%;
}
My image will stretch and be deformed in height to fit on screen.
If I define my image CSS like this (just without defining height):
div img {
width: 100%;
}
My image will not stretch/be deformed, but it will start at top: 0 of the image. What I want is the image to be centered vertically and the overflow of it's height to be hidden.
Basically I want the same behaviour I would get in CSS with background centered:
background: url(photo.jpg) no-repeat center;
background-size: cover;
EDIT: I forgot to mention that CSS object-fit: cover works on this but I'm looking for a more cross-browser solution since this property does not work in every browsers.
Try this css
div {
position: fixed;
top: 50%;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
EDIT
also its a bad practice to give the image both height and width. this will always override the aspect ratio of the image and stretch it in some direction.
use this for img
div img {
width: 100%;
}
This will first position the division 50% form top. i.e. the image will now have its topmost part at 50% of the page height then the translate property will move the image upward by 50% of its height essentially centering the image
How about this:
div {
position:fixed;
top:0;
left:0;
width: 100px;
height: 100px;
border:1px solid red;
text-align:center;
line-height:100px;
overflow:hidden;
}
img {
vertical-align:middle;
border:1px solid black;
}
<div>
<img src="https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus.gif">
</div>
If you allow js, you can do this (assuming the image has id 'img'):
#img {
width: 100%;
position: absolute;
top: 50%;
}
A negative margin top needs to be set using js or jQuery (on resize):
$('#img').css('margin-top', '-'+($('#img').height()/2)+'px');
I have a small block and image width larger than the block. I want to block center equals image center.
Image center and block center must be on 1 vertical line. And i want to see only central part of image.
Instead of use negative margin on your image, you can use the transform property
.img-container{
width:100px;
overflow:hidden;
}
.img-container img{
transform: translateX(-50%);
}
https://jsfiddle.net/7gk07eLm/2/
you can do this way
html
<div class="img-container">
</div>
css:
enter code here
.img-container{
max-width: 100px;
min-height: 580px;
background-repeat: no-repeat;
background-position: center;
background-image: url(http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701);
}
I can think of two ways of doing this:
Instead of <img> tag you can use background css property with background-position set to center, and with background-size set to cover, on <div>; in your case it's going to be something like this:
.img-container {
width: 100px;
height: 500px;
background: no-repeat center /cover url("path_to_your_image");
}
Height property must be set!
If you want to stick with <img> tag it's going to look something like this:
.img-container {
width: 100px;
height: 500px;
overflow: hidden;
position: relative;
}
.img-container img {
position: absolute;
right: -1000%;
left: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto;
}
The crazy numbers in right, left, top and bottom positions for image are because of small size of parent <div> and big size of image itself - the percentage is based on width and height of parent block, so in this case right: 100%; will be 100px, that's why you need bigger numbers for positioning a much larger image in a smaller parent block.
Values can be tweaked, of course, as long as they are equal image will be centered.
In both cases height must be set, or it won't work!
This question already has answers here:
Horizontal center dynamic image in div with absolute position
(2 answers)
Closed 8 years ago.
I want to have a page which displays an image as large as possible but with the whole image in view, without changing the proportions of the image, and centred on the page (i.e. full height with borders either side, or full width with borders top and bottom). Is there a way to do this purely in CSS? I've tried various combinations of width/height/min-width/min-height properties and can't get it to display as I'd like.
I also want to be able to overlay a link that consists of a div with a background image, which changes on hover, the code for which is below. I want this to be positioned at the top right of the image:
HTML:
<div class="imagecontainer">
<img src='gallery/images/<?php echo $image;?>' max-height="100%" width="100%"/>
<div class="backbuttoncontainer">
<a class="gallerybackbutton" href="gallery/index.htm"></a>
</div>
</div>
CSS:
.imagecontainer{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.backbuttoncontainer{
text-align:right;
margin-top: 10px;
margin-right: 10px;
height: 38px;
width: 100%;
display: block;
}
.gallerybackbutton{
background: url('icons/back_to_gallery.png') bottom;
display: inline-block;
height: 28px;
}
.gallerybackbutton:hover{
background-position: 0 0;
}
perhaps this is what you want : JSFIDDLE, here's how:
create a container for the image in any dimension you want (200x200 or 400x200 or 200x400 ), then put the image inside the container, with style
vertical-align: middle // to make your image centered vertically, but it's relative to the inline element, so if you don't have any text or set line-height for it's siblings, it doesn't work
max-width: 200px; // or your container width
max-height: 200px; // or your container height
// this style is used for my example with the container max-width and max-height set to 200px
then in the container add this style
text-align: center; // to make it centered horizontally
width: 200px; // for example
height: 200px; // for example
border: 1px solid red; // only to show the container in this example
line-height: 200px; // this will make the inline element in the center from 200px, or so
or another method by using pseudo element in this JSFIDDLE, you need to make a container and the image that going to be centered :
<div class="block">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-7.jpg" class="centered" />
</div>
add pseudo element to the container block
.block:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; // to remove the spacing that's created by inline-block
}
and add style for the image that's going to be centered
.centered {
display: inline-block;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
here's the explanation from css tricks: centering in the unknown
To use margin: auto you have to have a static width.
But your Image is a pixel image and will have that static width.
Just set your width of image and margin to auto:
.backbuttoncontainer{
margin:auto;
height: 38px;
width: 100px;
}
set image as background and try the following code
class-name{
background:url('1.jpg') no-repeat center center fixed ;
width:100%;
height:auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='1.jpg',sizingMethod='scale')";