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.
Related
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>
another newbie question here. Learning CSS. I am trying to do something that I thought would be very simple, but have not managed to find the way to do it, or a suitable answer to the question.
I have a simple project with a header, some content and a footer. The content has a div with a white border and an image inside it. I would like the div to be as wide as the image and no wider. I have provisionally set the width to 430px, but I would like to know the code to set the width to whatever the width of the image is.
Code
html
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
border: 1px solid white;
width: 430px;
display: block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Add display: inline-block; to your .imagewrap without setting it's width.
.imagewrap {
display: inline-block;
}
If you want a div with an image to be centered, add another div around them with:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
But do you really need that div around an image? The border might be added to an image itself without additional div.
If you want a border on the image, add it there
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
/*border: 1px solid white;
width: 430px;
display: inline-block;
line-height: 0;
margin: 0 auto;*/
top: 50%;
transform: translateY(-50%);
text-align: center; /*center image horizontally*/
}
#imagewrap img {
border: 1px solid white;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://unsplash.it/100/100" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Check out this fidde:
https://jsfiddle.net/56myv9g2/1/
#imagewrap img{
display:block;
}
#imagewrap{
position: relative;
border: 1px solid white;
display: inline-block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
#container {
height: 80%;
width: 100vw;
text-align:center;
background-color: red;
}
Also, you could just give the border to the image tag all along without the div
If you set display: inline-block, then you need to add text-align: center to container
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
text-align: center;
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: relative;
border: 1px solid white;
width: 430px;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
I want to create a footer where in the upper part there is a semi circle on the center with a logo inside of it. I have my sample code here, but the problem with it is that the logo is bound on the height of the footer div.
html,
body,
.container,
.content {
height: 100%;
}
.container,
.content {
position: relative;
}
.proper-content {
position: absolute;
padding-top: 40px;
/* >= navbar height */
}
.wrapper {
position: absolute;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
/* same as the footer */
}
.push {
height: 100px;
/* same as the footer */
}
.footer-logo {
height: 200px;
width: 100%;
position: absolute;
background-image: url("gaslogo.png");
background-position: 10% 100%;
z-index: 999;
}
.footer-wrapper {
position: relative;
height: 200px;
background-color: red;
}
.halfCircleBottom {
position: relative;
height: 100px;
width: 250px;
border-radius: 0 0 100px 100px;
-moz-border-radius: 0 0 100px 100px;
-webkit-border-radius: 0 0 100px 100px;
background: white;
}
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="logo"></div>
<div class="wrapper"></div>
<div class="push"></div>
</div>
<div class="footer-logo">dsad</div>
<div class="footer-wrapper">
<footer>
<center>
<div class="halfCircleBottom"></div>
</center>
</footer>
</div>
I used a :before pseudo element with background image for the circle.
.footer {
background: crimson;
height: 100px;
margin-top: 100px;
text-align: center;
}
.footer:before {
content: "";
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
background: crimson url("https://i.stack.imgur.com/Fogjj.jpg") center / cover;
border: 10px solid white;
border-radius: 50%;
box-sizing: border-box;
margin-top: -50px;
}
<footer class="footer"></footer>
I accomplished what you need this way:
Changed your HTML a bit:
<div class="footer-wrap">
<div class="halfCircleBottom">
<img src="insert your image with the same width as the parent div"/>
</div>
<footer>
<center>
</center>
</footer>
</div><!--end footer wreap-->
Then added and changed one of your css declarations:
footer {
background: black;
height: 100px;
}
.halfCircleBottom{
position: absolute;
height: 250px;
width: 250px;
border-radius: 50%;
background: white;
left: 50%;
transform: translate(-50%, -72%);
}
Try this
HTML:
<div class="content">content</div>
<div class="footer"></div>
CSS:
.content{
height: 200px;
text-align: center;
background: #fff;
}
.footer{
height: 100px;
background: #cf9f3f;
position: relative;
text-align: center;
}
.footer:before{
content: '';
width: 100px;
text-align: center;
height: 100px;
border-radius: 50%;
background: #cf9f3f;
border: 4px solid #fff;
position: absolute;
left: 0;
right: 0;
margin: -52px auto 0;
}
Example: https://jsfiddle.net/vc4mvwd2/
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
I am trying to achieve this
Image 1 and 3 would be slightly hidden behind image 2.
I have this html
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
Simple setup, single containing div with three sub divs each holding an image (identical native size).
Current CSS
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
So what I have done is aligned the images along the x axis using flex. I have then given the center image a position of absolute so that the z-index is taken into account. However this is where I run into the issue and the images are not laying out like the above example.
Here is a example if it helps
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;
}
.imageLeft img{
max-width: 60%;
}
.imageCentre {
z-index: 9999;
position: relative;
}
.imageCentre img{
width: 100%;
}
.imageRight img{
max-width: 60%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
I feel like I may be close and will keep trying but any help will be great!
Thanks
Tom
Did you think about something like this:
.imageBanner {
display: block;
position: relative;
margin: 0 auto;
width:100%;
max-width: 1024px;
}
.imageLeft {
width: 40%;
display: block;
position: absolute;
left: 0;
top: 30px;
z-index: -1;
}
.imageCentre {
width: 60%;
display: block;
position: relative;
z-index: 1;
margin: 0 auto;
}
.imageRight {
width: 40%;
display: block;
position: absolute;
right: 0;
top: 30px;
z-index: -1;
}
img {
width: 100%;
}
<div class="imageBanner">
<div class="imageLeft">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageCentre">
<img src="https://unsplash.it/600/400/">
</div>
<div class="imageRight">
<img src="https://unsplash.it/600/400/">
</div>
</div>
Left image's left indent you can set by change left: attribute, and right image's right indent change right:
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
img {
border: 5px solid red;
width: 100%;
height: auto;
}
.imageBanner {
display: flex;
align-items: center;
width:100%;
max-width: 1024px;}
img {
border: 5px solid red;
width: 100%;
height: auto;
}
.imageCentre {
width: 100%;
z-index: 900;
}
.imageLeft {
position: relative;
left: 5%;
}
.imageRight {
position: relative;
right: 5%;
}
.imageCentre {
width: 100%;
}
as shown in the fiddle: https://jsfiddle.net/fce2n85s/1/
nothing change in your code just add this css in your css code. if it's works answer me !
.imageBanner img {
border:solid 5px #000
}
.imageLeft {
text-align:right;
margin-right:-5px
}