I want to add circle view on my profile screen in my Ionic 2 project.
Is there any simple way to do that or what tag can I use in Ionic framework ?
Thank you.
Use css below. If you want a circle that seems like they have same width and height lengt. so, it can be like width: 2vw;height:2vw; Circle width will depend upon the device width.
.image {
height: 5vw;
width: 5vw;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 5px gray;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
<div class="image"></div>
I have created a circle image view in my project so it's code is here,
profile.html
<div class="bg-image">
<ion-img src="data:image/*;base64,{{src}}" class="round-image"
style="
height: 150px !important;
width: 150px !important;
margin-top: 12%;
background: none !important;
background-color :none !important;" (click)="presentActionSheet()">
</ion-img>
</div>
profile.scss
.bg-image {
background-color: #F7556D;
height: 350px;
width: 100%;
text-align: center;
}
.round-image img{
background-position: center center;
background-size: contain;
border-radius: 50%;
border: 3px solid;
border-color: rgb(255, 255, 255);
height: 100%;
width: 100%;
}
Here is both file and it looks like this
Related
I'm trying to set the left border of siginimage to 40px, but since the height of the signinimage is 25px, the border height is also being set as 25px.
.top-header {
float: left;
border-left: 2px solid #CCCCCC;
height: 30px;
margin-top: 0px;
}
#signinimage {
padding-top: 6px;
padding-left: 10px;
height: 25px;
width: 25px;
}
<img src="images/signinimage.png" class="top-header" id="signinimage">
Two approaches.
Either create a container and put the image inside it
In your question, you said you wanted to extend the border to the left
(but I mean that's just a matter of simple float:, but you can apply
this approach in general
img {
width: 100px;
height: 100px;
float: right;
}
#container {
border: 3px solid black;
width: 150px;
height: 100px;
}
<div id ="container">
<img src=https://i.imgur.com/QIsNrpM.png/>
</div>
The other alternative, if you insist on using only one element instead of two, you can set the image as a background-image of a differently sized div
#imganddiv {
border: 3px solid black;
width: 150px;
height: 100px;
background-image: url('https://i.imgur.com/QIsNrpM.png');
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: right center;
}
<div id="imganddiv"></div>
I personally prefer the first option as it's a bit more intuitive and generally considered a common practice on to how containers (elements inside elements) should be handled.
To get a border taller than the image, you can wrap the image in a container, and apply the border to that container.
.top-header{
float: left;
border-left: 2px solid #CCCCCC;
height: 40px;
margin-top: 0px;
/* Center the image vertically */
display: flex;
align-items: center;
}
#signinimage{
height: 25px;
width: 25px;
padding-left: 10px;
}
<div class="top-header">
<img src="http://placekitten.com/25/25" id="signinimage">
</div>
How do I enable the background images of both my parent divs and nested divs to scale responsively in a mobile-first manner using the following media query.
I have tried everything and nothing seems to work! I want the entire page to scale responsively, which includes both images(especially the motorcycle helmet picture), as the screen size shrinks or enlarges.
I want to find out how do I set up my mobile-first min-width media-query to achieve the desired effect of the all the images, or only the motorcycle helmet image to scale from small to large from mobile to desktop. I also want the buttons to remain in the same exact positions as that happens. Thankyou so much for your help?
You can view my CodePen code here:https://codepen.io/IDCoder/full/KZqNdr/
.container {
text-align: center;
background-image: url("https://s25.postimg.org/9pnce8yr3/galaxy-s8_overview_kv_type1b.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
margin: auto;
}
h1 {
color: white;
}
.Motorcycle {
margin: auto;
width: auto;
text-align: center;
}
.btn.btn-default {
color: #0040ff;
font-size: .80em;
font-family: Orbitron, sans-serif;
line-height: 4em;
}
.gstuff {
background-image: url("https://s25.postimg.org/b9aat9l7j/G_Motorcycle_Helmet_2.png");
background-repeat: no-repeat;
background-position: center;
width: 500px;
height: 681px;
margin: auto;
opacity: 0.85;
}
#push-one {
transform: translateY(200px);
background-color: #c6c6c4;
border-bottom: 2px inset #FFF;
border-right: 2px inset #FFF;
border-radius: 15px;
height: 50px;
width: 150px;
margin: auto;
}
#push-two {
transform: translateY(530px);
background-color: #c6c6c4;
border-bottom: 2px inset #FFF;
border-right: 2px inset #FFF;
border-radius: 7px;
height: 30px;
width: 50px;
margin: auto;
line-height: 2em;
color: blue;
}
#media (min-width: 500px){
.gstuff {}
}
<div class="container">
<div class="Motorcycle">
<h1>Random Quote Machine</h1>
<div class="gstuff">
<div class="btn btn-default" id="push-one">
Generate Quote
</div>
<div class="quote-box">
<p id="quote"></p>
<p id="author"></p>
</div>
<div class="btn btn-whatever" id="push-two">
Tweet
</div>
</div>
</div>
</div>
A simple and deffective way is to use background-size: cover or background-size: contain.
cover will always scale the background-image to fill the element completely, contain will always scale the image to be fully visible, both with keeping the width/height proportion intact to avoid distorted images.
i am a beginner who wants to learn please help.here archenemies is the id i gave to div.
div {
height:100px;
width:100px;
display: inline-block;
margin-left: 5px;
border-radius:100%;
border: 2px solid black;
}
#archenemies{
border:4px solid #cc0000;
background-image:"http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png";
background-size:90%;
}
Method 1 - Using Background Image.
The things to keep in mind while creating a circular div-
1. border-radius:50% or more
2. Backgound-imgage- size to cover
3. background position to center
Below is the working code.
div {
height: 100px;
width: 100px;
display: inline-block;
margin-left: 5px;
border-radius: 50%;
border: 2px solid black;
border: 4px solid #cc0000;
background-image: url(http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png);
background-size: cover;
background-position: center center;
}
<div> </div>
Method 2 - Using IMG SRC
div {
width: 100px;
height: 100px
}
img {
border-radius: 50%;
width: 100%;
height: 100%;
border: 4px solid red
}
<div><img src="http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png" /></div>
Sory if I ignored your height and width settings!
.circle {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 100px;
background-image: url('http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png') ;
background-size: 100px;
background-position:50%;
background-repeat:no-repeat;
<div class="circle"></div>
I have a circular thing going on for my website (amitnkalra.github.io)
My image seems to be to big for this? How do I make this smaller and still show the same part of the image that it's showing right now.
I have the following code :
.profile {
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(img/Avatar.jpg) no-repeat;
width: 200px;
-moz-box-shadow: 0 0 1px #7992ce;
box-shadow: 0 0 1px #7992ce;
margin: auto;
height: 200px;
}
Also, my social media icons aren't displaying, they're clickable, but the icons don't show-up, why is that?
Here's the code for that:
.Twitter {
width: 25px;
height: 25px;
background: url(img/Twitter.png);
margin: auto;
display: inline-block;
}
Your divs are way smaller (25x25) than your background images, so you're only seeing fractions of them. In order to fit them you can use:
background-size: 100%;
on all the elements that have social images set as backgrounds.
Ideally, in order to optimize the website performance and safe some bandwidth, you'd shrink those images down to 25x25 pixels (unless you use the big versions elsewhere).
body {
text-align:center;
}
.profilePicture {
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background-image: url(http://amitnkalra.github.io/img/anotherAvatar.jpg);
background-size: cover;
background-position: 45px top;
width: 200px;
height: 200px;
-moz-box-shadow: 0 0 1px #7992ce;
box-shadow: 0 0 1px #7992ce;
margin: auto;
}
.Twitter {
display: inline-block;
width: 50px;
height: 50px;
margin: auto;
}
.Twitter img {
height: 100%;
width: 100%;
}
<div class="profilePicture"></div>
<div class="Twitter"><img src="http://amitnkalra.github.io/img/Twitter.png" /></div>
The body css is not neccessary. I added it just to center the .Twitter
I used background-size: cover to ensure both width and height of the image fits the div and move the image to the left a bit by using background-position.
How do I get the logo centered inside the topbar who has a width of 100%? I feel like a complete idiot lol. margin: 0px auto aint working..
HTML
<div id="topbar-fullwidth">
<div class="tb menu" id="unfoldMenu"></div>
<div class="tb logo"></div>
</div>
CSS:
#topbar-fullwidth {
width: 100%;
height: 42px;
background: #000;
border-bottom: 2px solid #000;
position: relative;
overflow: hidden;
}
.tb.menu {
width: 44px;
height: 44px;
float: left;
background: url('../images/icons/unfold_menu#2x.png') no-repeat;
background-size: 22px;
background-position: 10px 13px;
}
.tb.logo {
width: 140px;
height: 44px;
float: left;
margin: 0px auto;
display: block;
background: url('../images/logo#2x.png') no-repeat;
background-size: 125px;
background-position: 10px;
}
Thanks lol.
You can't use margin:0 auto; on a floated element. So you need to remove float:left; on the logo.
FIDDLE
First of all you should not use float: with element that have margin:0 auto set.
Here is an example I hope it will help, changed background: with background-color to make changes visible. I have also removed float:left.