I have got the following structure in HTML:
<div id="a">
<div id="b">
<div id="c">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg"/>
</div>
</div>
</div>
And in CSS:
#a{
height: 300px;
background-color: red;
padding: 20px;
width: 100%;
text-align:center;
}
#b {
width: auto;
height: auto;
display: inline-block;
max-height:100%; /*should be 300px - 2*20px = 260px */
/*no height shall be set here*/
}
#c {
background-color:green;
max-width: 300px;
max-height: inherit;
}
img {
opacity: 0.8;
max-width: 100%;
}
I want the image to be scaled into the red container. The structure is kind of fixed that way. I also uploaded the fiddle for you:
Demo Fiddle
I hope someone is able to help!
Scaled with position: absolute on the image.
#a has position: relative and the position: absolute image will scale accordingly.
Centered with the combination of top, right, bottom, left and margin: auto
box-sizing: border-box incorporates the padding and any borders into your width and helps prevent that pesky scrollbar
Example
* {
box-sizing: border-box;
}
#a {
height: 300px;
background-color: red;
padding: 20px;
width: 100%;
text-align: center;
position: relative
}
#b {
width: auto;
height: auto;
display: inline-block;
max-height: 100%;
/*should be 300px - 2*20px = 260px */
/*no height shall be set here*/
}
#c {
background-color: green;
max-width: 300px;
max-height: inherit;
}
img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
opacity: 0.8;
height: 90%;
height: calc(100% - 40px);
}
<div id="a">
<div id="b">
<div id="c">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
Related
I'm a beginner and I was playing around with css (code given below)
and I set the yellow div to a 1000px and I thought the blue div would automatically
wrap around it given height:100%;
but to my surprise the yellow div seemed to overflow, I tried using the overflow:auto; but it added a scroll bar to prevent the overflow (which is not what I needed)
so is there anyway that the parent blue div always completely wraps around the yellow div no matter if i set it to a 1000px or 100% height using only CSS?
html,
body {
margin: 0;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
background: black;
width: 100%;
position: relative;
}
#rest {
height: 100%;
width: 100%;
background: blue;
position: absolute;
}
#content {
width: 50%;
left: 50%;
transform: translate(-50%, 0%);
background: yellow;
height: 1000px;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="rest">
<div id="content">
</div>
</div>
</body>
</html>
Try like below:
html,
body {
margin: 0;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
background: black;
width: 100%;
position: relative;
}
#rest {
min-height: 100%; /* update here */
width: 100%;
background: blue;
position: absolute;
}
#content {
width: 50%;
margin: auto; /* remove absolute and center with margin */
background: yellow;
height: 1000px;
}
<div id="header"></div>
<div id="rest">
<div id="content">
</div>
</div>
This is probably really easy question, but I have no idea how to do this.
The width is set as 100%, and height is auto. I want to hide 200px from bottom, but margin-bottom: -200px is not working.
.banner {
width: 100%;
height: auto;
}
.banner-photo {
width: 100%;
height: auto;
}
.banner-photo img {
width: 100%;
height: auto;
}
<div class="banner">
<div class="banner-photo">
<img src="https://media-exp1.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"/>
</div>
</div>
you can create a div like this, and it will effectively hide whatever is 200px from the bottom:
div {
height: 200px;
width: 100%;
position: fixed;
bottom:0;
background-color: white;
z-index: 100;
}
You need the negative margin-bottom on your content (your img), and overflow: hidden on your container.
I've hidden 200px from your fiddle example - note that it doesn't leave much showing!
.banner {
width: 100%;
height: auto;
}
.banner-photo {
width: 100%;
height: auto;
overflow: hidden;
}
.banner-photo img{
width: 100%;
height: auto;
margin-bottom: -200px;
}
<div class="banner">
<div class="banner-photo">
<img src="https://media-exp1.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"/>
</div>
</div>
How can I have div.fixed at 100% of the width of its parent .content? ... knowing that all widths will be variable, even .content
more or less what I need is .content with position: relative; div.fixed with the position: absolute; and width: 100%; But fixed at the top if I have a vertical scroll
and if possible without using JavaScript, only with CSS.
I was trying several things but none works, thank you for your time and help
.sidebar {
float: left;
background-color: red;
padding: 20px;
color: #fff;
}
.content {
float: left;
width: 40%;
padding: 20px;
background-color: #d5d2ca;
min-height: 900px;
box-sizing: border-box;
position: relative;
}
.fixed {
background-color: #aaffaa;
padding: 20px;
position: absolute;
box-sizing: border-box;
width: calc(100% - 40px);
}
.content p {
margin-top: 100px;
}
<div style="width: 90%; margin: 0 auto;">
<div class="sidebar">
the sidebar is going to have variable width
</div>
<div class="content">
<div class="fixed">
Fixed
</div>
<p>content</p>
</div>
</div>
100% of .content? That would be
width:calc(40% - 40px);
change that line:
<div style="width: 90%; margin: 0 auto;">
to
<div style="width: 100%; margin: 0 auto;">
also add to the class:
.fixed {
width: 100%;
}
and remove width:40%; from the .content
I am not sure if i understand the problem correctly, but if you want to make the fixed div to have 100% of its parent, then the following should work
.content {
position: relative;
}
.fixed {
width: 100%;
position: absolute;
}
For your question to be solved, must width of .content equal with width of .fixed so, use of:
.fixed {
width: inherit;
//so .fixed get width 40%
}
But,
.fixed have position:fixed, so 40% is relative to the screen's viewport,
and
.content is 40% relative to his parent[div with width:90%,(90% relative to body)].
in here ,we have to do something to measure both elements relative to one element.so,do this:
html,body {
width: 100%;
margin:0;
}
<div style="width:100%; margin:5px 70px;">
of 90% to 100%----^ ^---^-------optional
also, use margin-left:-20px for remove affect padding:20px in .content.
.fixed {
margin-left: -20px;
//more code...
}
NowŁ you have both elements have width:40% relative to same element.
Note, Get Full Page to better see result.
* {
box-sizing: border-box;
}
html,body {
width: 100%;
margin:0;
}
.sidebar {
float: left;
background-color: red;
padding: 20px;
color: #fff;
}
.content {
float: left;
width: 40%;
padding: 20px;
background-color: #d5d2ca;
min-height: 900px;
position: relative;
}
.fixed {
background-color: #aaffaa;
padding: 20px;
margin-left: -20px;
position: fixed;
width: inherit;
}
.content p {
margin-top: 100px;
}
<div style="width:100%; margin:5px 70px;">
<div class="sidebar">
the sidebar is going to have variable width
</div>
<div class="content">
<div class="fixed">
Fixed
</div>
<p>content</p>
</div>
</div>
I have a responsive design with a header image which is placed in a container. The image has width:100%; and height:auto; so it grows as you enlarge the viewport. I don't want to exceed a certain height so the container has a max-height. The image still grows but now the bottom part is cut off now because it aligns to the top of the container.
I would like the image to stay vertically centered in it's container so that parts of the image are cut off at the top and at the bottom. The outcome should look like this:
The header images are uploaded by users so they might have different heights therefore I cannot work with specific pixel-values. Is there a CSS-solution for this or do I have to use JavaScript?
Here is the code:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
}
.container {
text-align: center;
height: auto;
line-height: 200px;
max-height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: auto !important;
vertical-align: middle;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
And I prepared a fiddle.
You can use absolute positioning for your image , negative top/bottom values and margin:auto; to verticaly center the image in the container :
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
max-height: 200px;
}
.container {
position:relative;
padding-bottom:40%;
overflow: hidden;
}
img {
position:absolute;
top:-50%; bottom:-50%;
margin:auto;
width: 100%;
height: auto;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
Not so long ago there was only a javascript way to do this but now we have some css rules: object-fit and object-position
They work just like the background-size rules cover and contain:
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
The problem with this approach is that is very new and doesn't work on ie or Edge yet.
Pen here: http://codepen.io/vandervals/pen/MwKKrm
EDIT: Please, see that you need to declare the width and the height of the image, or it won't work.
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
height: 200px;
overflow: hidden;
}
.imgWrapper {
position: relative;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: auto;
width: 50%;
}
<div class="wrapper">
<div class="container">
<div class="imgWrapper"><img src="http://placehold.it/600x300"></div>
</div>
</div>
http://jsfiddle.net/ghygpw8t/5/
inspired by: https://css-tricks.com/perfect-full-page-background-image/
Try like this: Demo
If image size is small it will be arranged in vertical middle and if its big, it will fit in box.
CSS:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
text-align: center;
line-height: 200px;
overflow: hidden;
background-color:#ccc;
vertical-align:middle;
height: 200px;
border:2px solid green;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
img {
width: 100%;
max-height: 196px;
border:2px solid red;
vertical-align: middle;
line-height: 196px;
}
Hope this is what you want!
On the element you want centered.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
on its parent.
.parent { transform-style: preserve-3d; }
Use a polyfill to render cross browser styles.
I am currently trying to fit an image into a div container, but it doesnt work. I have got a complex div-tree on my page, that looks like this:
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
</div>
And the following CSS:
#a {
height: 300px;
background-color: red;
position: relative;
text-align: center;
}
#b {
height: 100%;
width: 100%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
text-align: center;
padding: 20px;
}
#c {
width: auto;
height: auto;
display: inline-block;
max-height: 100%;
background-color: black;
padding: 20px;
}
#d {
width: 400px;
background-color:yellow;
max-height: inherit;
}
img {
max-width: 100%;
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: calc(100% - 80px);
margin: auto;
}
I want the image to be fitted into the blue container. It should also take care on the given div containers. Currently the black one does not fill till the end plus padding of the container.
Demo Fiddle
I hope someone is able to help.
Here is a new concept for you. box-sizing: border-box incorporates the padding into the percentage width and heights automatically. The image no longer needs position: absolute.
The width and height of all the inner divs are controlled by the width on the #a container and their padding.
New Demo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#a {
background-color: red;
position: relative;
text-align: center;
width: 400px;
padding: 20px;
}
#b {
background: blue;
padding: 20px;
}
#c {
background-color: black;
padding: 20px;
}
#d {
background-color: yellow;
padding: 20px;
}
img {
width: 100%;
display: block; /* remove inline gap */
}
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
</div>
Old Answer
Remove width: auto; height: auto; and padding: 20px on #c
Place height: 100% on #c
Reason this happens - The height: 100% of #c is affected by the padding on #b so any extra padding will blow up the height.
Demo
#a {
height: 300px;
background-color: red;
position: relative;
text-align: center;
}
#b {
height: 100%;
width: 100%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
text-align: center;
padding: 20px;
}
#c {
height: 100%;
display: inline-block;
background-color: black;
}
#d {
width: 400px;
background-color:yellow;
max-height: 100%;
}
img {
max-width: 100%;
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: calc(100% - 80px);
margin: auto;
}
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
</div>
</div>
</div>
</div>
Here And try giving " #d" a height
#d > img {
width: 100%;
height: 100%;
text-align:center;
}