i want to fit image with parent div (image-container) with corect ratio
.image-container{
height: 195px;
border-radius: 10px;
position: relative;
width: 482px;
width: 482px;
}
img{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
object-fit: contain;
overflow:hidden
}
.gray-layer{
width: 482px;
height: 195px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
}
<div class="image-container">
<img src="https://javadeveloperzone.com/wp-content/uploads/2019/02/JAVA-PARSE-LARGE-JSON-FILE-GSON-EXAMPLE-1024x488.png">
<div class="gray-layer">
</div>
</div>
my above code doesn't fit the image. please help me
First, you can use overflow: hidden on the parent div in order to have the rounded corner work for the contained img without having to specify them again.
Then, if you want the img to always fill out the entirety of the parent div, then you should set width and height to 100% and use object-fit: cover:
.image-container {
width: 482px;
height: 195px;
position: relative;
border-radius: 10px;
border: 1px dashed #ccc;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="image-container">
<img src="https://javadeveloperzone.com/wp-content/uploads/2019/02/JAVA-PARSE-LARGE-JSON-FILE-GSON-EXAMPLE-1024x488.png">
</div>
If you, however, want the image to just take on the parent's width (possibly growing out or leaving space at the bottom), then setting width to 100% should do the trick:
.image-container {
width: 482px;
height: 195px;
position: relative;
border-radius: 10px;
border: 1px dashed #ccc;
overflow: hidden;
}
img {
width: 100%;
}
<div class="image-container">
<img src="https://javadeveloperzone.com/wp-content/uploads/2019/02/JAVA-PARSE-LARGE-JSON-FILE-GSON-EXAMPLE-1024x488.png">
</div>
Note that I've omitted the .gray-layer for brevity and added a border to image-container to better see what's going on.
Yes. Add missing ending div and give height/width to 100% to get it working.
.image-container {
height: 195px;
border-radius: 10px;
position: relative;
width: 482px;
}
img {
height: 100%;
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.gray-layer {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
height: 100%;
width: 100%;
top: 0;
}
<div class="image-container">
<img src="https://javadeveloperzone.com/wp-content/uploads/2019/02/JAVA-PARSE-LARGE-JSON-FILE-GSON-EXAMPLE-1024x488.png">
<div class="gray-layer"></div>
</div>
Related
I have a assesment from my professor where i need to create a div square and overlay an image over it. i have tried to use Positioning, indexing and i tried to play with the margins but i couldnt figure out how to overlay my image over the div.
can someone help me please?
assignment from professor:
my code result:
my code:
body {
margin: 0;
}
body>* {
max-width: 250px;
max-height: 250px;
}
video {
max-height: 425px;
}
.square {
width: 75%;
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
position: relative;
}
img {
width: 66%;
margin-right: -100%;
position: absolute;
z-index: 1;
opacity: 0, 5;
}
<div class="square"></div>
<img src="/images/100km.png" alt="100km bord">
The absolute positioned element needs to be inside the relative positioned element. Otherwise it'll be positioned in relation to root element.
In this case your image needs to be inside the <div>
body {
margin: 0;
}
body>* {
max-width: 250px;
max-height: 250px;
}
.square {
position: relative;
width: 75%;
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
}
img {
width: 66%;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
opacity: 0, 5;
border-radius: 50%;
}
<div class="square">
<img src="https://picsum.photos/200" alt="100km bord">
</div>
Here is the issue, you put absolute on the image, but the but the squire needs to be absolute and the image needs to be relative.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment-E1</title>
<style>
body {
margin: 0;
}
body > * {
max-width: 250px;
max-height: 250px;
}
video {
max-height: 425px;
}
.square{
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
position: absolute;
}
img{
width: 66%;
margin-right: -100%;
position: relative;
z-index: 1;
opacity: 0,5;
}
</style>
</head>
<body>
<div class="square"></div>
<img src="/images/100km.png" alt="100km bord">
</body>
</html>
This should do the trick. I created a main container to hold both the square and image and give it a class container. Then used different positions to set it match what you have
//HTML
<div class='container'>
<div class="square"></div>
<img src="/images/100km.png" alt="100km bord">
</div>
CSS
You should adjust the opacity between 0 and 1 . The image is in the bottom right corner to match what you want
.container{
position: relative;
}
.square{
width: 75%;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
position: relative;
}
img{
width: 66%;
margin-right: -100%;
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
opacity: 0.5;
}
This worked.
body {
margin: 0;
}
body>* {
max-width: 250px;
max-height: 250px;
}
.square {
position: relative;
width: 75%;
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
}
img {
width: 66%;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
opacity: 0, 5;
border-radius: 50%;
}
<div class="square">
<img src="https://picsum.photos/200" alt="100km bord">
</div>
I have the following overlapping divs:
#circle {
width: 150px;
height: 150px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
border-radius: 100%;
margin-top: 30px;
}
#rect {
margin-left: 20px;
width: 100px;
height: 100px;
border-radius: 5px;
background-color: lightblue;
display: inline-block;
}
<div id='wrapper'>
<div id='circle'></div>
<div id='rect'></div>
</div>
I want to make the circle div only appear inside of the rectangle div, but I cannot put one inside the other and use overflow. How can this be achieved?
If it's only about visual, use the circle as background of the div:
#rect {
margin-left: 20px;
width: 100px;
height: 100px;
border-radius: 5px;
background:radial-gradient(circle 75px at 55px 105px, rgba(0, 0, 0, .3) 99%,transparent);
background-color: lightblue;
display: inline-block;
}
<div id='wrapper'>
<div id='rect'></div>
</div>
This isn't very practical, but the only way to do this without changing the markup is to crop it with the parent wrapper using position: relative and overflow: hidden on the parent. Adjust the location of the circle with top: 30px and left: -20px.
The parent would also need to set the rounded corners with
border-radius: 5px.
Of course if this is just a background, then it should be set with a background radial gradient on the rectangle.
Example
#wrapper {
position: relative;
display: inline-block;
margin: 30px;
border-radius: 5px;
overflow: hidden;
}
#circle {
width: 150px;
height: 150px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
top: 30px;
left: -20px;
border-radius: 100%;
}
#rect {
width: 100px;
height: 100px;
background-color: lightblue;
}
<div id="wrapper">
<div id="circle"></div>
<div id="rect"></div>
</div>
Hi there, I want to crop the image within a div that is divided into two parts in a circle. One side is half cropped pic and the other side is just background color with the name on it. I am currently using following code :
width: 220px;
userdp {
height: 220px;
border: 4px solid red;
border-radius: 50%;
position: relative;
object-fit: none;
}
If your image is inside the div element that you're applying that styling to as below you should just need to add overflow: hidden to the CSS.
<div class="userdp">
<img src="..." />
</div>
And the styling.
.userdp {
height: 220px;
width: 220px;
border-radius: 50%;
overflow: hidden;
}
I've created an example here for you:
https://jsfiddle.net/20g4uL0j/1/
You can use the following,
**HTML**
<div class="circle">
<div class="image">
<img src="your-image.png" />
</div>
<div class="color">Text</div>
**CSS**
.circle{
width: 220px;
height:220px;
border-radius: 50%;
overflow:hidden;
}
.image, .color{
width:50%;
float:left;
height:100%;
}
.color{
background-color: #099;
}
You can do this as follow:
https://jsfiddle.net/ivan0013/f1a06cxe/
div {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 55px;
width: 110px;
}
.right,
.left {
height: 110px;
width: 55px;
}
.top {
border-top-left-radius: 110px;
border-top-right-radius: 110px;
}
.right {
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
}
.bottom {
border-bottom-left-radius: 110px;
border-bottom-right-radius: 110px;
}
.left {
border-bottom-left-radius: 110px;
border-top-left-radius: 110px;
}
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
overflow: hidden and a little more play with the positioning, z-index, and object-fit may help you achieve that.
Here is an example for you (EDITED after re-reading your question):
.userdp {
height: 220px;
width: 220px;
border: 4px solid black;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.userdp-img {
z-index: 1000;
width: 100%;
height: 100%;
object-fit: cover;
}
.userdp-info {
z-index: 2000;
width: 50%;
height: 100%;
color: #ddd;
background-color: red;
border-right: 3px solid black;
}
.userdp-info-inner {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.userdp-img,
.userdp-info {
position: absolute;
top: 0;
left: 0;
}
<div class="userdp">
<div class="userdp-info">
<div class="userdp-info-inner">
John Doe
</div>
</div>
<img src="https://unsplash.it/300/300?image=1005" class="userdp-img">
</div>
Hope it helped.
Alright so I am trying to a basic overlay over an image but it seems that I am doing something wrong, instead of being width and height 100% of the IMG, it is width and height 100% of the entire page
HTML
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
And the CSS
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position:absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:rgba(255,255,0,0.5);
width: 100%;
height: 100%;
}
JS fiddle: https://jsfiddle.net/0utbjwo0/
you should add position: relative; to your absolute parent div
#main_BodyNews{
position: relative;
}
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
position: relative;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position:absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color:rgba(255,255,0,0.5);
}
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
You can use absolute. It's just that you are setting
width: 100%;
height: 100%;
Remove that and set your margin-top and margin left. You can set your width and height for the actually dimensions of your image. If you do this, you wont have to exactly keep your overlay div within your image div.
Here is an example of one I have made for my site.
#overlay {
margin-top: 60px;
margin-left: 88px;
height: 30px;
width: 85px;
position: absolute;
}
You can temporarily set a background-color for it so that you can get a good idea of where it is placed on your page. Then adjust your margins accordingly.
It's because the position: absolute has top, right, bottom, left value of 0. You don't need to specify the height and width. To make it resize on it's parent size. You need position: relative on parent element.
#main_BodyNews {
width: 50%;
height: 300px;
background-color: #F2C68C;
margin-top: 50px;
margin-left: 20px;
float: left;
border-radius: 5px;
border: 1px solid #F2C68C;
position: relative;
}
#main_BodyNews img {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: 1px solid #F2C68C;
position: relative;
}
.overflow-box {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color: rgba(255, 255, 0, 0.5);
}
<div id="main_BodyNews">
<img src="img/main.png" alt="mainNews" />
<div class="overflow-box"></div>
</div>
I want to draw an inner div over an outer div for scrolling purposes. How can I change my CSS to fix this?
HTML code:
<div class="sliderPath">
<div class="slider"></div>
</div>
CSS code:
.sliderPath {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 80%;
height: 20%;
margin: auto;
}
.slider {
border-radius: 4px;
background:#50c2de;
position: absolute;
width: 50px;
height: 50px;
left: 50%;
}
https://jsfiddle.net/ImSonuGupta/0bx6uwyn/1/
Try setting top position to small value:
.slider {
border-radius: 4px;
background:#50c2de;
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: 3px; //added this
}
And also set position: relative on parent:
.sliderPath {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 80%;
height: 20%;
margin: auto;
position: relative; //added this
}
updated jsfiddle
Simply make .sliderPath the base position for its childs, with position:relative, and make .slider top 100% off its parent height.
.sliderPath {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 80%;
height: 20%;
margin: auto;
position:relative;
}
.slider {
border-radius: 4px;
background:#50c2de;
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top:100%
}
EDIT
if you need multiple slides, just add margin-bottom to .sliderPath equal to .slider height. So it would be:
.sliderPath {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 80%;
height: 20%;
margin: auto;
position:relative;
margin-bottom:50px;
}