I'm having this code to create a circular image with css
<div class="round2">
<img src="http://fwncwww14.wks.gorlaeus.net/images/home/news/mbt_pasfoto_Dino_van_Dissel.jpg" />
</div>
.round2 {
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
}
.round2 img {
display: block;
/* Stretch
height: 100%;
width: 100%; */
min-width: 100%;
min-height: 100%;
}
Now I would like to be the circle in the middle of the image instead of the top position of the image.. Does anyone of you know how to achieve this?
Thanks very much !
Just move it away by 50% and then transform it back 50%, like this:
.round2 {
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
}
.round2 img {
display: block;
min-width: 100%;
min-height: 100%;
position: relative;
/* use `calc(50%)` if you want to be old-browser safe */
left: 50%;
top: 50%;
/* Be sure to prefix where necessary */
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
<div class="round2"><img src="http://placehold.it/450x350" /></div>
Now just position the outer .round2 class box to move your image around. This works because the translate function relates to the img elements width, and not the parent containers'.
Add display: inline-block; or display: block; to your .round2 class.
.round2 {
display: block; /* or inline-block */
border-radius: 50%;
overflow: hidden;
width: 150px;
height: 150px;
}
Related
I need to put the image in the parent container. The image is larger than the parent's size, need to scale the height of the parent and hide everything oversized. The width of the parent is not explicitly defined, there is only the height calculated using Calc. Don't want to use background:url, because image will use area map
.container
{
height: calc(100vh - 56px);
overflow: hidden;
}
.container img
{
height: auto;
max-height: 100%
}
HTML
<div class="container">
<img src="/img/spec3/panel.png" />
</div>
better option to give it object-fit: cover as well
.container
{
height: calc(100vh - 56px);
overflow: hidden;
border: 5px solid red;
position: relative;
}
.container img
{
display: block;
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg" />
</div>
Here is solution
.container
{
height: calc(100vh - 56px);
overflow: hidden;
position: relative;
margin: 0;
}
.container img
{
display: block;
position: absolute;
top: 50%;
left: 50%;
max-height: 100%;
transform: translate(-50%, -50%);
}
i'm currently trying to create a landing page for a mobile website, and I want two main divs with an image on it. (In my example there are colors). Here is my HTML :
<ion-content>
<div class="upperblock"></div>
<div class="downblock"></div>
</ion-content>
My CSS :
.upperblock{
width: 100%;
height: 50%;
background-color: #2ec95c;
}
.downblock{
width: 100%;
height: 50%;
background: #000;
}
I would like to have a "leaning" separation, something like that (the screenshot of my result, and the red line is where I'd like the separation to be ):
Thank you in advance for any help, couldn't find anything about this !
.container {
position: relative;
overflow: hidden;
background-color: #2ec95c;
}
.upperblock {
width: 100%;
height: 200px;
background-color: #2ec95c;
color: #000;
}
.downblock {
width: 100%;
height: 200px;
background-color: #000;
color: #FFF;
}
.block {
transform: skewY(-6deg);
padding: 50px;
margin: -5% 0;
}
.block * {
transform: skewY(6deg);
}
<div class="container">
<div class="block upperblock">
<h2>content</h2>
</div>
<div class="block downblock">
<h2>content</h2>
</div>
</div>
You may want to add another div down below each div (I think :after should do the trick here) and then turn it with transform: rotate(15deg). This will turn the div.
Important note: Content in the turned box will be also turned. So you may want to seperate the content and background div.
Other way would be to create a svg image. SVG will scale perfectly and the code will look way cleaner ;)
You can also use pseudo-elements to achieve that
body {
margin: 0;
width: 100vw;
height: 100vh;
}
.upperblock {
width: 100%;
height: 50%;
background-color: #2ec95c;
position: relative;
}
.downblock {
width: 100%;
height: 50%;
background: #000;
position: relative;
}
.downblock::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: inherit;
position: absolute;
top: 0;
transform: skewY(-5deg) translateY(-65%);
}
<div class="upperblock"></div>
<div class="downblock"></div>
You can append a block to the upperblock div using CSS and rotate that using transform. You'll need to play with the heights depending on your content but this will expand and be responsive.
.outer {
overflow: hidden;
}
.upperblock{
width: 100%;
min-height: 40vh;
background-color: #2ec95c;
position: relative;
}
.upperblock::after {
content: "";
display: block;
height: 120px;
background: #2ec95c;
width: calc(100% + 50px);
position: absolute;
bottom: -60px;
transform: rotate(7deg);
}
.downblock{
width: 100%;
min-height: 60vh;
background: #000;
}
<div class="outer">
<div class="upperblock"></div>
<div class="downblock"></div>
</div>
I have a parent div and a child div. The child div has the position: absolute property. It is already centered, but I'd like to align it to the middle of the parent div. How do I go about doing that? Here's my jsFiddle
HTML
<div id='parent'>
<div id='child'>
</div>
</div>
CSS
#parent {
position: relative;
width: 500px;
height: 300px;
background-color: red;
}
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 0;
right: 0;
margin: 0 auto;
border-radius: 50%;
}
The solution is to use transform: translate(-50%, -50%) on the child div, like so:
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 50%;
top: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
https://jsfiddle.net/jwoy7rxr/
This works because the transform positions the item based on a percentage from it's own point of origin.
Since the parent has a height based on px, you can safely use a simple margin top and bottom to centre the element.
#parent {
position: relative;
width: 500px;
height: 300px;
background-color: red;
}
#child {
position: absolute;
width: 70px;
height: 70px;
background-color: blue;
left: 0;
right: 0;
margin: 115px auto;
border-radius: 50%;
}
Here's the fiddle: https://jsfiddle.net/Lr3fLser/
You need to give the parent:
#parent {
width: 500px;
height: 500px;
background-color: red;
display: table-cell;
vertical-align: middle;
}
#child {
width: 70px;
height: 70px;
background-color: blue;
border-radius: 50%;
}
You need the display table-cell in order to use the vertical-align.
Then add align="center" to the parent div's:
<div align="center" id="parent">
<div id='child'>
</div>
</div>
I have the updated JSFiddle attached:
https://jsfiddle.net/o7pzvtj3/2/
Here is my jfiddle - fiddle, everything is perfect here but only the probelm is when you minimise the window the image goes down , need to fit that image in vertically center which is not happening now
HTML:
<div class="left_panel">
<div class="slide-frame">
<img src="http://www.w3schools.com/bootstrap/paris.jpg">
</div>
</div>
CSS:
.left_panel {
border: 1px solid #ddd;
border-collapse: collapse;
bottom: 0;
left: 0;
position: absolute;
right: 300px;
top: 0;
background:#ddd;
}
.left_panel .slide-frame::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left_panel .slide-frame{
height: 100%;
text-align: center;
width: 100%;
}
.left_panel .slide-frame img {
display: inline-block;
height: auto;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
width: auto;
}
The reason for this behaviour is, that the :after element is an inline element. That causes a little gap between the image and that element. With setting the fon-size to zero, you remove that gap:
.left_panel {
font-size: 0;
}
Good article about that topic on CSS-Tricks. This solution is preferable, because you aren't using text. With text, there are other approaches to remove the space between inline elements.
Please check this for vertical and horizontal div without using height. https://jsfiddle.net/hardyrajput/myuqm5x8/2/
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
padding: 20px;
color: white;
text-align: center;
}
use this
.left_panel .slide-frame {
height: 100%;
text-align: center;
width: 100%;
display: inline-table;
}
just add display property
I have this simple code to vertically and horizontally center a text element on a page:
body {
max-width: 1200px;
margin: 0 auto;
}
.container {
position: relative;
transform-style: preserve-3d;
height: 100vh;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
}
Doing this places the text in the in the vertical center of the container, but ever-so-slightly off-center to the right on the horizontal. I would think "left: 50%" would horizontally center it correctly, no?
Close, but you need to add translateX as well. Luckily, there's a nice shorthand for accomplishing both X and Y transform at the same time:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The reason it's slightly off-center is because left: 50% pushes the element so that it's left side is at 50% exactly. Adding the transformX(-50%) negates that extra space. See the snippet below:
.box-container {
position: relative;
height: 200px;
}
.center-box {
position: absolute;
background: black;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="box-container">
<div class="center-box"></div>
</div>
If you can use flexbox then I would recommend using it. It makes this very simple:
body {
margin: 0;
}
.container {
height: 400px; /* Just for the snippet */
width: 400px; /* Just for the snippet */
background-color: #f4f4f4; /* Just for the snippet */
margin: 0 auto; /* Just for the snippet */
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="center">
This is centered
</div>
</div>
You can find about flexbox browser support from here: http://caniuse.com/#search=flex