I am creating a social site and people can upload images. When they upload those image it is inside of a div. How do I fill the whole div up so i don't see white spaces on the sides ?
This is how it looks now:
First Example
Second e.g
My code:
.postedImageDiv {
max-width: 500px;
overflow: hidden;
max-height: 400px;
border-radius: 10px;
border: 1px solid gray;
background: #fff;
margin-bottom: 1em;
}
.profilePostedImage img {
max-height: 450px;
max-width: 450px;
display: block;
margin: 5px auto;
}
.postedImage img {
align-self: center;
object-fit: contain;
max-height: 600px;
max-width: 600px;
display: block;
margin: 5px auto;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
You might try these:
max-width: 100%;
max-height: 100%;
display: block;
.outside {
max-width: 500px;
overflow: hidden;
max-height: 400px;
border-radius: 10px;
border: 1px solid gray;
background: #fff;
margin-bottom: 1em;
}
.img-inside{
width: 100%;
height: 100%;
display: block;
}
<!-- vertical image example -->
<div class="outside">
<img class="img-inside" src="https://i.guim.co.uk/img/media/86c3481516dce247943ac2978b4f48d16a3ac265/0_170_5120_3074/master/5120.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=637dc5731d52754675ef36344a6af3c8">
</div>
<!-- landscape image example -->
<div class="outside">
<img class="img-inside" src="https://www.straight.com/files/v3/styles/gs_standard/public/images/15/03/shutterstock_grizzlybear_0.jpg?itok=vz6hpl50">
</div>
Related
I know that fixed positioning does not work relative to the parent, only to the browser window and the solution is absolute, but I also have a problem with that.
In the div in which I need a scroll inside, I have to put the icon always visible in the bottom right corner.
My fiddle: https://jsfiddle.net/nck7o0jL/
Below is my code.
.big {
height: 600px;
width: 600px;
border: 2px solid black;
}
.small {
height: 300px;
width: 300px;
border: 2px solid red;
overflow: auto;
position: relative;
resize: both;
}
img {
width: 30px;
height: 30px;
position: absolute;
right: 15px;
bottom: 15px;
}
<div class="small"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png">
<div class="big">
</div>
</div>
As you can see, by stretching the div.small the icon is held, but during the scroll it is not.
Will someone give a helping hand?
You can approximate this using flexbox and position:sticky
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.big {
height: 600px;
width: 600px;
flex-shrink: 0;
}
.small {
height: 300px;
width: 300px;
border: 2px solid red;
overflow: auto;
resize: both;
display: flex;
}
img {
width: 30px;
height: 30px;
margin: auto 0 15px auto;
position: sticky;
order: 1;
right: 15px;
top: calc(100% - 45px);
}
<div class="small"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png">
<div class="big">
</div>
</div>
I have the following:-
HTML
<div class="profile-picture">
<img src="http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg" alt="Profile - James Hales">
</div>
CSS
.profile-picture img {
border-radius: 50%;
margin-top: 0;
margin-bottom: 20px;
height: 392px;
width: 250px;
}
I want the profile picture to be a perfect circle with the image placed inside. Is there a way to essentially crop the image with CSS so that it would take 'x' amount of pixels off the bottom so that the image displays inside a circle without distorting the image?
JSFIDDLE
Here are two ways to realize what u want. The second shows the image centered instead of vertical aligning on top.
.profile-picture {
position:relative;
overflow:hidden;
border-radius: 50%;
height: 200px;
width: 200px;
}
.profile-picture img {
position:absolute;
height: auto;
width: auto;
max-width:100%;
}
.centered img {
position:absolute;
top:50%;
transform:translateY(-50%);
}
<div class="profile-picture">
<img src="http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg" alt="Profile - James Hales">
</div>
<div class="profile-picture centered">
<img src="http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg" alt="Profile - James Hales">
</div>
You can use object-fit but support isn't great
.profile-picture {
border-radius: 50%;
margin-top: 0;
border: 1px solid black;
margin-bottom: 20px;
height: 250px;
width: 250px;
overflow: hidden;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
<div class="profile-picture">
<img src="http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg" alt="Profile - James Hales">
</div>
Or you can set img as background
.profile-picture {
border-radius: 50%;
margin-top: 0;
border: 1px solid black;
margin-bottom: 20px;
height: 250px;
width: 250px;
overflow: hidden;
background: url("http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg");
background-size: cover;
background-position: center;
}
<div class="profile-picture"></div>
Flexbox can do that. Of course the container has to be square to start with.
.profile-picture {
border-radius: 50%;
margin-top: 0;
border: 1px solid black;
margin-bottom: 20px;
height: 250px;
width: 250px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
img {
display: block;
}
<div class="profile-picture">
<img src="http://thumb9.shutterstock.com/display_pic_with_logo/239779/154705646/stock-photo-portrait-of-real-man-face-looking-at-camera-on-blue-background-154705646.jpg" alt="Profile - James Hales">
</div>
I'm trying to make a rectangular div that's 95% the width of the viewport and 20% high. But I want another rectangular div inside of that, that is vertically and horizontally centered with a slight2px margin.
.Outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
}
.Inner {
border: 1px solid hotpink;
width: 95%;
height: 95%;
margin: auto;
}
It depends upon requirements. But according to question, here is the answer. Please take a look and let me know in case of any issue
.Outer {
width: 95vw;
height: 20vh;
border: 1px solid #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Inner {
border: 1px solid hotpink;
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
<div class="Outer">
<div class="Inner"></div>
</div>
Tried to use relative measuring units just in case you are dealing with a responsive design. The .outer box is display: table and the Inner is display: table-cell. They sit perfectly together and the 2px margin your requested is provided by a 2px padding from .Outer
html {
box-sizing: border-box;
font: 500 16px/1.428'Consolas';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
position: relative;
font-size: 1rem;
line-height: 1;
height: 100%;
width: 100%;
}
.Outer {
position: absolute;
top: 20%;
left: 3%;
outline: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: table;
padding: 2px;
}
.Inner {
border: 1px solid hotpink;
width: 95%;
height: 95%;
margin: auto;
display: table-cell;
}
<section class="Outer">
<section class="Inner"></section>
</section>
I'm not 100% this is what your looking for because this has Magic Numbers, but here is a JSFiddle of what I came up with using your provided code.
#Outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
position: relative;
}
#Inner {
border: 1px solid hotpink;
width: 95%;
height: 50%;
position: aboslute;
margin-top: 5vh;
margin-left: 2.5vw;
}
<div id=Outer>
<div id=Inner>
</div>
</div>
JSFiddle
Hopefully this helps and you could mess around with it to use percentages on the viewpoints instead of magic numbers.
When I want to center a div vertically, I have a couple classes that help me to do it.
.outer {
border: 1px solid #ccc;
max-width: 95vw;
max-height: 20vh;
width: 95vw;
height: 20vh;
margin: auto;
display: block;
}
.inner {
border: 1px solid hotpink;
width: 95%;
height: 90%;
margin: auto;
}
.valign-wrap {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.valign-wrap .valign {
display: block;
}
<div class="outer valign-wrap">
<div class="inner valign center"></div>
</div>
JSFiddle
I always recommend add these classes to your projects, they are very useful. Good luck!
I have currently built a grid layout for my content and i want to use images inside a div column as the background. At first I placed an image with a class of "img-responsive inside the div columns and this works perfectly. Now i want to achieve the same effect but have the image as a background instead. I am having trouble getting my background-image height to scale with the width of the div. With the img-responsive class i have a 'width: 100%;' and 'height: auto;' how do i apply the same logic to a background-image? I can't set the div column class to height: auto; or have a max-height of N pixels because this displays nothing. Below is an example of my code, The top two divs are what what i want my background images to be like. Can anyone explain to me how i can achieve this?
body {
margin: 0 auto;
padding: 30px 30px 5px 30px;
font-family: sans-serif;
color: black;
font-size: 1.2em;
}
section {
width: 80%;
margin: 0px auto;
line-height: 1.5em;
font-size: 0.9em;
padding: 30px;
color: black;
overflow: hidden;
}
.row {
margin: 1% auto;
width: 100%;
overflow: hidden;
padding-bottom: 10px;
}
.row::after {
content: "";
display: table;
clear: both;
}
.col {
line-height: 0;
margin-left: 1%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
display: inline-block;
float: left;
overflow: hidden;
}
.col:first-child {
margin-left: 0px;
}
.col:last-child {
margin-right: 0px;
}
.img-responsive {
max-width: 100%;
height: auto;
}
.col.col-6 {
width: 47%;
height: auto;
border: 2px solid black;
margin-left: 1%;
margin-right: 1%;
}
.col.col-6-bg {
width: 47%;
max-height: 1000px;
min-height: 145px;
min-height: 200px;
margin-left: 1%;
margin-right: 1%;
border: 2px solid black;
}
.img-bg {
background-image: url("http://prasinostcharles.com/wp-content/uploads/2014/09/gallery-large_food_cod.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#media (max-width: 766px) {
section {
width: 90%;
}
col {
width: 80%;
margin: 10px auto;
padding: 0;
}
.col.col-6 {
width: 98%;
min-height: 141px;
margin-left: 0;
margin-right: 0;
}
.col.col-6-bg {
width: 98%;
min-height: 200px;
margin-left: 1%;
margin-right: 1%;
}
}
<h2>Div with img</h2>
<div class="row">
<div class="col col-6">
<img class="img-responsive" src="http://prasinostcharles.com/wp-content/uploads/2014/09/gallery-large_food_cod.jpg">
</div>
<div class="col col-6">
<img class="img-responsive" src="http://prasinostcharles.com/wp-content/uploads/2014/09/gallery-large_food_cod.jpg">
</div>
</div>
<h2> Div with img as bacground</h2>
<div class="col col-6-bg img-bg"></div>
<div class="col col-6-bg img-bg"></div>
I've been battling with this problem for a while and I'd like to ask advice if any of you can help.
I'm making a simple layout where I have a 120px high header and a content div under it. I'd like to stretch the content to the bottom of the page, but when I set the height to 100% it stretches over the page.
I have tried googling this plenty of times but none of the answers I've found help me or are too complex to understand.
My CSS is as follows:
* {
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
border: 5px solid red;
margin-bottom: -16px;
}
body {
background-color: lightblue;
height: 100%;
border: 5px solid blue;
margin: 0 0 -16px 0;
}
.wrapper {
display: block;
position: relative;
background-color: green;
width: 605px;
margin: auto;
height: 100%
}
.header {
display: inline-block;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
I've set borders to html and body just to see that I can stretch them properly, so please ignore those.
You can position the header absolute within the content div and set the top padding on the content div to the same height as the header.
JSFiddle
HTML
<div class="wrapper">
<div class="content">
<div class="header"></div>
</div>
</div>
CSS
.header {
position:absolute;
top:0;
left:0;
background-color: blue;
height: 120px;
width: 450px;
text-align: center;
padding: 5px 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content {
display: inline-block;
background-color: red;
padding: 10px 5px;
width: 450px;
height: 100%;
padding-top:120px;
}
Set max-height: 100%; instead of height: 100%; which will not over-height the header height as it is defined height: 120px;