Are there any ways that we can set a tag inside a div perfectly center no matter what is the width and height of that div? In other way, I want to set an image position inside a div tag like a center background. For example:
.image-wrap {
width: 50vw;
height: 720px;
background: url('some-images.jpg') no-repeat center center / auto 100%;
}
I want to set an image inside a div like a background above with auto width and 100% height so that all the important content in an image will be in the center of the div.
<div class="image-wrap">
<img src="some-images.jpg" alt="some image here"/>
</div>
Thank you very much!
You can center it easily using flex property. Demo here
.image-wrap {
height: 400px;
display: flex;
align-items: center;
justify-content: center;
border: dotted 1px #CCC;
}
<div class="image-wrap">
<img src="http://lorempixel.com/400/200" alt="some image here"/>
</div>
You could use transform: translate
.image-wrap {
position: relative;
height: 400px;
text-align: center;
border: 1px dashed gray;
}
.image-wrap img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="image-wrap">
<img src="http://placehold.it/200" alt="some image here"/>
</div>
Now, if you want it to behave as background-size: auto 100% does, do like this
.image-wrap {
position: relative;
height: 200px;
border: 1px dashed gray;
overflow: hidden;
}
.image-wrap img {
position: relative;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
<div class="image-wrap">
<img src="http://placehold.it/600x100" alt="some image here"/>
</div>
<div class="image-wrap">
<img src="http://placehold.it/200x400" alt="some image here"/>
</div>
And here is a version behaving as background-size: cover does
.image-wrap {
position: relative;
height: 200px;
overflow: hidden;
border: 1px dashed gray;
margin-bottom: 10px;
}
.image-wrap img {
position: relative;
min-height: 100%;
min-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div class="image-wrap">
<img src="http://placehold.it/600x100" alt="some image here"/>
</div>
<div class="image-wrap">
<img src="http://placehold.it/200x400" alt="some image here"/>
</div>
And this version behaving as background-size: contain does
.image-wrap {
position: relative;
height: 200px;
overflow: hidden;
border: 1px dashed gray;
margin-bottom: 10px;
}
.image-wrap img {
position: relative;
max-height: 100%;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div class="image-wrap">
<img src="http://placehold.it/600x100" alt="some image here"/>
</div>
<div class="image-wrap">
<img src="http://placehold.it/200x400" alt="some image here"/>
</div>
You could do it like so:
.image-wrap {
width: 50vw;
height: 720px;
background: url('some-images.jpg') no-repeat center center / auto 100%;
position: relative;
}
img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px; /* (EXAMPLE) - value should be half of the image width */
margin-top: -100px; /* (EXAMPLE) - value should be half of the image height */
}
<div class="image-wrap">
<img src="some-images.jpg" alt="some image here"/>
</div>
.parent-div {
width: 50vw;
height: 720px;
position: relative;
z-index: 1;
}
.image-wrap {
background-position: 50% 50%;
background-size: cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
you can use like this
<div class="parent-div">
<div class="image-wrap" style="background-image: url('http://weknowyourdreams.com/images/nature/nature-02.jpg')"></div>
</div>
This is where FlexBox properties become very useful. You can set align-items: center; on a container to (by default) vertically center any child elements. Here's an example: https://jsfiddle.net/ks62qtns/
The advantage of this is that you don't need to know the dimensions of any of the elements involved in the layout - which is very useful for responsive designs and/or dynamic content.
Flex properties are reasonably well supported in modern browsers. You might need fallbacks to support older versions of IE (if you need to)
HTML:
<div class="container">
<div class="content">
<h1>
Content. Any Content.
</h1>
<p>
I might have anything in me!
</p>
</div>
</div>
CSS:
.container {
display: flex;
align-items: center;
justify-content: center;
background: #EEE;
/* This is just to make a big container. You can set the dimensions however you like.*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.content {
background: #89D485;
padding: 2rem;
text-align: center;
}
This is the most over thought out problem that most developers run into.
If the object is inside another object you are able to just use margin: 0 auto; inside the CSS. This will make the left and right ways to line up correct. This also then works for all media queries from small screen to large screens.
You can use jquery to calculate the width of the div and image.
$(img).css({
position: "absolute",
left: ($(img).parent().width() - $(img).width()) / 2
});
This would mean:
((width of div)-(width of image))/2
This would center image perfectly.
just do it like this.set the container's property "text-align:center",make it is the inline-block element and 100% height，then can get what you want.
.image-wrap{
width: 50vm;
height: 720px;
text-align: center;
}
.image-wrap img{
display: inline-block;
height: 100vm;
}
Related
I want to ask how to put an image/icon on top of the background-image or another image?
The image/icon should stay in the same place/coordinate even if the size of the window changes, just like the idea of image mapping. The icon size should also be responsive to the screen/window size.
I tried some answers from the previous questions, but it doesn't work. The image on top doesn't stay in the same place.
<style>
.page {
position: relative;
width: 100vw;
height: 100vh;
}
.bg {
width: 100vw;
height: 100vh;
}
.top {
position: absolute;
width: 50px;
height: auto;
top: 500px;
left: 600px;
}
</style>
<body>
<div class="page">
<img class="bg" src="bg.jpg" alt="">
<img class="top" src="plus.png" alt="">
</div>
</body>
results here
fullscreen
smaller screen size
I would suggest to use a the background property directly on your div.page and then position your image inside it with a position: absolute. You can try the below for example, filling your images' url.
.page {
position: relative;
width: 100vw;
height: 100vh;
background: url("");
background-size: cover;
background-repeat: no-repeat;
}
.plus-icon {
position: absolute;
top: 2rem;
left: 2rem;
height: 100px;
width: 100px;
}
<div class="page">
<img class="plus-icon" src="" alt="">
</div>
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning
https://developer.mozilla.org/en-US/docs/Web/CSS/background
I am using particle js as a background image.Now
<div id="particles-js"></div>
<div class="text">
<h1>Particles Background</h1>
</div>
I have to set position attribute of .text as absolute. Otherwise the section remains hidden. I don't seem to understand why others become hidden. I can't use absolute as it will break my code. Below is the css. Only if I set .text as position:absolute it will display
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
}
.text {
position: relative;
top: 50%;
right: 50%;
}
<div id="particles-js"></div>
<div class="text">
<h1>Particles Background</h1>
</div>
You are facing this issue possibly because of heighr z-index value for #particle-js
You can do it by either making position: absolute; for #particle-js and/or increasing the z-index for .text
To understand more about positions please check this link
You are using divs which by default have layout but with no contents have no size. You also position the right of one element so the text is off screen. You can then fix that by right align of the text in the div. Here I put two examples to help understand the differences, one with no content as you have and one with a right aligned text.
I put some borders on just so you have a visual of the elements.
#mycontainer{border:solid lime 1px;}
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
border: solid 1px blue;
}
.text {
position: relative;
top: 50%;
right: 50%;
border: solid 1px red;
}
<div id="mycontainer">
<div id="particles-js">cheese </div>
<div class="text">
<h1>Particles Background</h1>
</div>
</div>
Second example
#mycontainer {
border: solid lime 1px;
width: 100%;
height: 100%;
}
#particles-js {
position: relative;
width: 100%;
height: 100%;
background: grey;
border: solid 1px blue;
}
.text {
position: relative;
top: 50%;
right: 50%;
border: solid 1px red;
text-align:right;
}
<div id="mycontainer">
<div id="particles-js">
</div>
<div class="text">
<h1>Particles Background</h1>
</div>
</div>
I'm trying to find a way to do the following:
Have 2 divs, each with an image as a child element, each 50% width of current viewport
Scale each of these two divs in a 1:1 aspect ratio, and let the image inside each of them fill as good as possible
Never make the divs larger (width or height) so that we get scrollbars in our browser..
Am I asking for the impossible? Or is there a way to do this in css?
For example, let's say I have viewport of 1800x700 px. That would mean each of my columns would have dimensions of 900x900 if run the code below. But my viewport is only 700px heigh = I get scrollbars..
.columns-ratio-slide-container{
background-color: green;
position: relative;
height: 100%;
.col-container{
width: 50%;
padding-top: 50%;
position: relative;
float: left;
#include debug();
.half{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
img{
display: block;
max-height: 100%;
&.landscape{
width: 100%;
height: auto;
}
}
}
}
}
HTML structure:
<div class="columns-ratio-slide-container">
<div class="col-container">
<div class="half">
<img src="https://placeholdit.imgix.net/480x640">
</div>
</div>
<div class="col-container">
<div class="half">
<img src="https://placeholdit.imgix.net/640x320">
</div>
</div>
</div>
See this image if that helps...
You can use 50vw and 100vh to get what you want. Here is an example code snippet:
EDIT: use flex layout to put 2 divs in horizontal center place and update the jsfiddle. Also, describe how to deal with header and footer.
*
{
margin:0;padding:0;
}
.parent {
display: flex;
justify-content: center;
}
div.container
{
width: 50vw;
height: 50vw;
max-height: 100vh;
max-width: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: 50%;
}
.container1 {
background-color: red;
background-image: url('https://img3.doubanio.com/lpic/s4554820.jpg');
}
.container2 {
background-color: green;
background-image: url('http://pagead2.googlesyndication.com/simgad/10067268081911489671');
}
<div class="parent">
<div class="container1 container"></div>
<div class="container2 container"></div>
</div>
A jsfiddle is also made. You can adjust the view area's width/height, these 2 divs' aspect ratio are always 1:1, and no scrollbar will appear.
If header or footer is needed, you can use calc() on max-height and max-width, such as:
max-height: calc(100vh - 80px); // 80px is the sum of header height and footer height.
max-width: calc(100vh - 80px);
You can use the "display: table-row" and "display: table-cell"
.columns-ratio-slide-container {
background-color: green;
position: relative;
height: 100%;
display: table-row;
}
.col-container{
width: 50%;
position: relative;
display: table-cell;
vertical-align: middle;
}
.col-container img{
display: block;
max-height: 100%;
width: 100%;
height: auto;
}
<div class="columns-ratio-slide-container">
<div class="col-container">
<div class="half">
<img class="landscape" src="http://placehold.it/480x640">
</div>
</div>
<div class="col-container">
<div class="half ">
<img class="landscape" src="http://placehold.it/640x320">
</div>
</div>
</div>
I have an image which changes size to the windows size, and I need to position an element (anchor tag) on it so that it is always in the same place relative to the image. The image is not a background image but an HTML element.
This question is very similar but is for when the image is a background image.
Position element over background image. But the BG img changes size with the window. CSS
<img src="images/img.jpg" >
Link that should be over the image in a certain location.
<div class="wrapper">
<img src="images/img.jpg">
Link that should be over the image in a certain location.
</div>
<style>
.wrapper {
position: relative;
}
a {
position: absolute;
top: 10%;
left: 10%;
}
</style>
Wrap the image etc in an shrink-wrapped div and base the positioning off that.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
margin: 10px;
border: 5px solid red;
position: relative;
display: inline-block;
}
.map img {
max-width: 100%;
display: block;
}
.box {
width: 5%;
height: 5%;
background-image: url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 36%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 75%;
white-space: nowrap;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>
Codepen Demo
Do you mean something like this?
.image {
position: relative;
width: 100%; /* for IE 6 */
}
a {
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
<div class="image">
<img src="http://kingofwallpapers.com/grey/grey-001.jpg"/>
Link that should be over the image in a certain location.
</div>
I'm beginner in HTML/CSS.
I've created some div that looks like a circle. I want to put facebook image into that circle, but as a circle logo.
HTML
<div class="social" id="social1"> Facebook
<a href="www.facebook.com">
<img src="https://www.facebook.com/images/fb_icon_325x325.png" width="106" height="106"/>
</a>
</div>
CSS
div {
display: inline-block;
margin-left: 55px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
text-align:center;
}
img {
width: 100%;
height : 100%;
object-fit: contain;
}
How to fit img into div circle ?
.social .facebook {
display: inline-block;
width: 100px;
height: 100px;
background: url(https://www.facebook.com/images/fb_icon_325x325.png);
background-position: 50% 50%;
background-size: cover;
border-radius: 50%;
}
<div class="social" id="social1">
<a class="facebook" href="https://www.facebook.com/"></a>
</div>
Basically there are two ways to achieve this.
You could add border-radius: 50%; to the img element.
You could add overflow: hidden; to the div element.
Both will work. You should remove the "Facebook" string to get proper positioning of the image.
You were very close. The text content "facebook" of the DIV is taking up room and needs to be removed. It can be replaced by alt text to display if the image is not available, with a title attribute that typically displays as a tooltip. Height and width are not needed for the IMG element since it is specified in CSS:
<div class="social" id="social1">
<a href="https://www.facebook.com">
<img src="https://www.facebook.com/images/fb_icon_325x325.png"
alt="facebood" title="facebook">
</a>
</div>
Besides this you only need to add overflow: hidden as a property for the div CSS
Alternatively if you want to support IE and Edge which (from #Blazemonger 's comment) don't support object-fit, you could add the image as a background attachment of the DIV and make the DIV itself the link element's content (without an alt text option):
HTML
<a href="https://www.facebook.com">
<div class="social" id="social1" title="facebook">
</div>
</a>
and include
background-image: url("https://www.facebook.com/images/fb_icon_325x325.png");
background-size: cover;
overflow:hidden;
in CSS for the div element.
overflow:hidden; + position:relative/absolute to not mind the text aside image :
div {
display: inline-block;
margin-left: 55px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
text-align: center;
position: relative;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<div class="social" id="social1">Facebook
<a href="www.facebook.com">
<img src="https://www.facebook.com/images/fb_icon_325x325.png" width="106" height="106" />
</a>
</div>
You could set a border radius in CSS to round the image like so:
img {
width: 100%;
height : 100%;
object-fit: contain;
border-radius: 999px;
}
Example: http://codepen.io/JasonGraham/pen/zBGYgx
Well you can do this :
div {
display: inline-block;
margin-left: 55px;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
text-align: center;
background: url("https://www.facebook.com/images/fb_icon_325x325.png") center no-repeat;
background-size: cover
}
<a href="https://www.facebook.com/">
<div class="social" id="social1"></div>
</a>
img{
border-radius: 100%;
object-fit:cover
}
This will position the image so that it appears centered and cropped and round its edges.
Add border-radius:100% to your img css code segment as well.
img {
width: 100%;
height : 100%;
border-radius:100%;
}