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%;
}
Related
I'm trying to vertically crop an image inside a div and I'm having trouble getting the vertical-align and background-position styles to register and work...
I've tried using vertical-align, background-position, background-position-y, I've tried calling the background image url inline in style, and nothing is working correctly...
The images are being called in the HTML within a js file:
<div class="product-image-wrap" data-slider-quickview="">
<img src="${result[i].images[0].src}" class="variant-image-${result[i].images[0].id}" alt="">
</div>
and the CSS is as follows:
.product-image-wrap {
overflow: hidden;
border-radius: 8px !important;
padding: 12px;
width: 100%;
height: 170px;
background-position: center, center;
background-repeat: no-repeat;
}
.product-image-wrap .img {
display: inline-block;
width: 100%;
height: 170px;
vertical-align: middle;
}
Not sure I understand what you want to achieve, maybe you want to change the height of the wrapper but contain the aspect ratio of the image? In this case you can use object-fit: cover; on the image, then you can change the height of the wrapper div freely:
div {
overflow: hidden;
border-radius: 18px;
padding: 12px;
width: 100%;
height: 170px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div>
<img src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg">
</div>
I have an HTML page with 2 containers.
One of the containers, contains a transparent button with a question mark icon.
When ever I'm resizing the page, I would like the icon to be resized accordingly.
this is my div declaration in the HTML file:
<div class="container button">
<div class="col-xs-10 col-sm-70">
<i class="fa fa-question-circle fa-4x" aria-hidden="true" title="How does it work"></i>
</div>
</div>
this is how I set the container in the css:
section#analyze .container.button {
border: 2px solid black; /*delete'*/
position: relative;
margin-right: 10%;
width: 5%;
display: none;
height: 120%;
}
and this is how I set the button in the css:
section#analyze .container.button .btn-primary {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
font-size: 100%;
width: 100%;
height: 100%;
left: 20%;
margin-top: 20%;
position: initial;
}
What do I need to change in order for the ICON to be smaller or bigger when ever Im resizing the page itself?
You could use the screen with and height properties in css. vw and vh: https://css-tricks.com/viewport-sized-typography/
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;
}
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>
As shown in the screenshot, there are contents inside a div element which has a background image. This div container is set to have height: 40% of its parent, I believe it is <ion-content> in this case. Now, the image and the text underneath are cropped. I want to make them fit inside the div container. The background image is also not centered in the div.
How can I style it such that all the contents can be displayed?
How can I center my background image both vertically and horizontally?
It somehow works if I make the browser viewport narrower as shown below. However, I would like to have everything displayed and the background image centered both vertically and horizontally regardless the width of the viewport.
HTML
<div style="height: 40%; overflow: hidden;">
<div class="user-profile">
<div class="user-profile-background"></div>
<div class="user-profile-content">
<div class="row" style="height: 100%;">
<div class="col col-center">
<div class="row">
<div class="col col-33 col-offset-33">
<div style="height: 0; border-radius: 50%; background-image: url('img/ionic.png'); background-repeat: no-repeat; background-size: cover; background-position: center center; padding-top: 100%;">
</div>
</div>
</div>
<div class="row">
<div class="col" style="text-align: center; color: rgba(200, 200, 200, 1);">
<h3 style="color: white;">Seraph Cheng</h3>
<p><strong>Male, 28</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.user-profile {
position: relative;
width: 100%;
height: 100%;
}
.user-profile .user-profile-background {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-image: url('../img/basketball.jpg');
background-size: cover;
}
.user-profile .user-profile-content {
position: relative;
z-index: 2;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
Edit
Added a CodePen link to illustrate my problem.
The problem is the background-size: cover css rule. You can test the difference between cover and contain here:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
It's fully compatibility with latest browsers: http://caniuse.com/background-img-opts
Try this:
.user-profile .user-profile-background {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-image: url('../img/basketball.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
You can set an explicit height for the background image for example height = 350px and set center center as the position property where you have specified the background image. This way the height will remain fixed but as the view port is reduced, the background image will start cropping from left and right sides i.e it would remain in the center.
Then on smaller view port, you can reduce the height to say 250px.
HTML
<div class="root">
<div class="subroot">
<div class="container">
<div class="square bg"></div>
</div>
<div class="passage">
<p>Hello world!</p>
</div>
</div>
</div>
CSS
.root {
width: 70%;
margin: auto;
border: 2px solid yellow;
background-image: url('http://baconmockup.com/600/400');
background-size: cover;
background-position: center;
}
.subroot {
background-color: rgba(0, 0, 0, 0.7);
}
.container {
border: 2px solid black;
width: 100px;
margin: auto;
}
.square {
border: 2px dotted red;
padding-bottom: 100%;
}
.bg {
background-image: url('http://placehold.it/200x300');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
}
.passage {
border: 2px dotted green;
width: 80%;
margin: auto;
text-align: center;
white-space: nowrap;
overflow: scroll;
color: white;
}
Problem solved.