I want to create a responsive circle and I want to fit the image. I want to use img tag not with css (background)
Here is what i've tried
.circular--portrait {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
height: auto;
}
<div class="circular--portrait">
<img src="img.jpg" />
</div>
.circular--portrait {
position: relative;
width: 20vw;
height: 20vw;
overflow: hidden;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="circular--portrait">
<img src="http://beerhold.it/500/300" />
</div>
Here's a solution that has the image be responsive according to the width of its parent container.
.container {
/* Feel free to adjust the values here so you can see it being responsive */
width: 200px;
}
.circle {
position: relative;
width: 100%;
height: 0;
padding: 100% 0 0;
border-radius: 50%;
overflow: hidden;
border: 1px solid gray;
}
.circle img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="container">
<div class="circle">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Chapultepec_Zoo_-_Jaguar_%2802%29.jpg/2560px-Chapultepec_Zoo_-_Jaguar_%2802%29.jpg" />
</div>
</div>
You can try it out on CodePen
You can try to do it with SCSS. You just need to create one variable.
$width: calc(100vw / 5);
.circle {
width: $width;
height: $width;
background: url('https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350');
border-radius: 50%;
float: left;
margin: 5px;
}
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
please see the fiddle
You can try to do it with SCSS. You just need to create one variable.
$width: calc(100vw / 5);
.circle {
width: $width;
height: $width;
border-radius: 50%;
float: left;
margin: 5px;
background: red;
overflow: hidden;
}
<div class="circle">
<img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="circle">
<img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="circle">
<img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="circle">
<img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
Please see the fiddle
Related
How do I make my image gets centered in the .s-circles-1 <div>...
Html
.s-circles-1 {
display: inline-block;
opacity: 0.1;
margin-left: 315px;
margin-top: 155px;
background-color: #fff;
width: 164px;
height: 164px;
border-radius: 100%;
position: relative;
}
.s-img-1 {
opacity: 0.9;
display: inline-block;
position: absolute;
color: #E37218;
margin-right: 70vw;
width: 120px;
height: 120px;
}
<div class="services">
<div class="s-text">
<h2>Services</h2>
</div>
<div class="s-circles-1">
<img src="/Shapes/code (1).svg" alt="" class="s-img-1">
</div>
</div>
I am trying to make my image get inserted in the circle.
Thanks in advance.
With background-image :
div.circle {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 100%;
width: 164px;
aspect-ratio : 1 / 1;
}
<div class="services">
<div class="s-text">
<h2>Services</h2>
</div>
<div class="circle" style="background-image: url(https://thispersondoesnotexist.com/image)"></div>
</div>
With your code, you need to change your css with this (if you don't want to use background-image) :
s-circles-1 class : set overflow:hidden;
s-img-1 class : set
width:100%; and height:100%;
.s-circles-1 {
display: inline-block;
opacity: 0.5;
width: 164px;
aspect-ratio:1 / 1; /* Keep the same width */
border-radius: 100%;
overflow: hidden;
}
.s-circles-1 img {
opacity: 0.9;
width: 100%;
height: 100%;
}
<div class="services">
<div class="s-text">
<h2>Services</h2>
</div>
<div class="s-circles-1">
<img src="https://thispersondoesnotexist.com/image" alt="">
</div>
</div>
With your code, but if your image is not a square :
div.circle {
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
width: 164px;
aspect-ratio : 1 / 1;
overflow: hidden;
}
div.circle img {
/*if width > height*/
height: 164px;
/*if height > width*/
/*width: 164px;*/
}
<div class="services">
<div class="s-text">
<h2>Services</h2>
</div>
<div class="circle">
<img src="https://dummyimage.com/1200x500/000/fff" alt="" class="circle">
</div>
</div>
How can I center this image that I have in this div in a way that it won't move the 'line' div? I want the line to be touching the top of the square too.
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
Here is one way to prevent it from disrupting the flow layout of your container:
you can make the container a position of relative, and the image a position of absolute, positioned off the top and left by 50%, then transform it so that the center of the image is in the center position.
You could also just make the image a background-image of the div instead of using an image element, which may be easier to manipulate.
.black {
background: black;
}
.square {
position: relative;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
</div>
I'm not sure I understand your exact desired end goal. But, if I understand correctly, you could create a flex parent to justify the image, and then position the line absolutely within that. See -
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
background-color: red;
position: absolute;
left: 0;
top: 0;
bottom: 0
}
<div class="square black">
<div class="line"></div>
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
You can just use these css for .square and .image
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
position: relative;
}
.image {
height: 60px;
width: 60px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You can easily center a image by using CSS position absolute. By making the position of square black class "absolute" and apply to properties "top: 45%;" and "left: 47%" . By applying this your problem will be definitely solve.
.black {
background: black;
}
.square {
display: flex;
align-item: center;
justify-content: center;
width: 200px;
height: 500px;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
</div>
.black {
background: black;
}
.square {
position: absolute;
top: 45%;
left: 47%;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top:50%;
left:50%;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
I want to centralize a div block on both x-axis and y-axis. But I can't move the block by using translate.
.maincontain {
position: relative;
min-height: 100%;
width: 100%;
float: left;
}
.bannerimage {
position: absolute;
width: 64%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: 100% 100%;
border-radius: 5px;
background-color: violet;
}
<div class="maincontain">
<div class="bannerimage" id="image_gallery">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
</div>
</div>
You may consider using flex or grid to avoid playing around with position, min-height can also use vh units (viewport height) instead % that requires to inherit an height value from the parent to calculate it.
examples:
body {
margin: 0;
}
.maincontain {
display: grid;
min-height: 100vh;
}
.bannerimage {
margin: auto;
width: 64%;
border-radius: 5px;
background-color: violet;
}
<div class="maincontain">
<div class="bannerimage" id="image_gallery">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
</div>
</div>
body {
margin: 0;
}
.maincontain {
display: flex;
min-height: 100vh;
}
.bannerimage {
margin: auto;
width: 64%;
border-radius: 5px;
background-color: violet;
}
<div class="maincontain">
<div class="bannerimage" id="image_gallery">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
</div>
</div>
i add a image in my container after this when i create another div it overlapping each other i want second div visible below container div
this is html
<header>
<div class="top_nav">
</div>
</header>
<div class="container">
<img src="cover.jpg">
<div id="short-des">
</div>
</div>
<div class="details">
</div>
css
*{
margin: 0;
padding: 0;
}
.top_nav{
height: 80px;
width: 100%;
background: rgba(0,0,0,.5);
position: relative;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
}
.details{
height: 638px;
width: 100%;
position: absolute;
}
i want div name detail to show below the container div
Here's the solution (fiddle):
*{
margin: 0;
padding: 0;
}
.top_nav{
height: 80px;
width: 100%;
background: rgba(0,0,0,.5);
position: relative;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
display: block;
}
.details{
height: 638px;
width: 100%;
}
<header>
<div class="top_nav">
top nav
</div>
</header>
<div class="container">
<img src="http://placehold.it/300x300">
<div id="short-des">
short descr
</div>
</div>
<div class="details">
details
</div>
I guess this is what you want fiddle
.container{
height: 638px;
width: 100%;
max-width: 100%;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.details{
height: 638px;
width: 100%;
border:solid 1px red;
}
removed the position:absolute property
<header>
<div class="container">
<div class="top-nav">
</div>
</div>
</header>
<section class="section-one">
<div class="continer">
<div class="image-outer"><img src="your-image">
</div>
<div class="your-title">
</div>
</div>
</section>
I have written the following code to auto fit image in DIV. It is perfectly working in JSFIDDLE but not working in my blog http://roadroute.blogspot.in/2015/08/flipkart.html
Please find the code below
.responsive-container1 {
position: relative;
width: 250px;
height: 415px;
border: 1px solid red;
margin-right: 10px;
margin-top:10px;
float: left;
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align:center; /* Align center inline elements */
font: 0/0 a;
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
max-width: 100%;
max-height: 100%;
margin: auto;
vertical-align: middle;
display: inline-block;
}
<div class="responsive-container1">
<div class="dummy"></div>
<div class="img-container">
<img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/01.jpg" alt="" />
</div>
</div>
<div class="responsive-container1">
<div class="dummy"></div>
<div class="img-container">
<img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/02.png" alt="" />
</div>
</div>
<div class="responsive-container1">
<div class="dummy"></div>
<div class="img-container">
<img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/03.jpg" alt="" />
</div>
</div>
Please help.
just add
width:100%; height:100%;
in your image container class.
.responsive-container1 {
position: relative;
width: 250px;
height: 415px;
border: 1px solid red;
margin-right: 10px;
margin-top:10px;
float: left;
}
.dummy {
padding-top: 100%;
max-width:100%;
max-height:100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align:center; /* Align center inline elements */
font: 0/0 a;
max-width:100%;
max-height:100%;
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
max-width:100%;
max-height:100%;
}
.img-container img {
width: 100%;
height: 100%;
margin: auto;
vertical-align: middle;
display: inline-block;
}
<div class="responsive-container1">
<div class="dummy"></div>
<div class="img-container">
<img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/01.jpg" alt=""/>
</div>
</div>
<div class="responsive-container1">
<div class="dummy"></div>
<div class="img-container">
<img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/02.png" alt="" />
</div>
</div>
<div class="responsive-container1">
<div class="dummy"></div>
<div class="img-container">
<img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/03.jpg" alt="" />
</div>
</div>
You should remove following css:
.dummy {
padding-top: 100%;
}
.img-container {
bottom: 0;
font: 0px/0 a;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
And .post-body img have have padding: 8px; will put/display your image outside div. Either remove that Or make image max-width: 90%;.
It will wok for you.
Edit:
Give: text-align:center to .responsive-container1.
.responsive-container1 {
border: 1px solid red;
float: left;
height: 415px;
margin-right: 10px;
margin-top: 10px;
position: relative;
text-align: center;
width: 250px;
}
And max width and height 90% and give position and top value And also give transform.
.post-body img {
background: #222222 none repeat scroll 0 0;
border: 1px solid transparent;
border-radius: 0;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
max-height: 90%;
max-width: 90%;
padding: 8px;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
It will do the trick.