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>
Related
I have a wierd problem. I have exactly the same DOM and CSS rendered with React and rendered with pure HTML. However, in React children of the div.container doesn't get the proper height when it's set in %. It works well when it's set with vh or with px, but I can't use those. Any idea why? And how to fix this problem?
div.form label:after, div.wrapper:after, div.container:after {
display: block;
content: '.';
clear: both;
height: 0;
visibility: hidden;
line-height: 0;
padding: 0;
margin: 0;
}
body {
width: 100%;
margin: 0;
min-width: 319px;
min-height: 479px;
background-color:black;
}
div.container {
margin: 0 auto;
width: 100%;
height: auto;
max-height: 1368px;
max-width: 1368px;
min-width: 319px;
min-height: 100%;
position: relative;
background-color:red;
}
nav {
width: 82px;
height: 100%;
height: 100vh;
max-height: 1368px;
float: left;
z-index: 1000;
overflow: hidden;
background-color: #55c7f9;
}
header {
height: 15%;
margin: 0 6%;
float: initial;
position: relative;
width: calc(100% - 80px);
background-color:orange;
}
div.wrapper {
min-height: calc(100% - 62px);
height: auto;
width: calc(100% - 80px);
float: right;
background-color:yellow;
}
div.main {
width: 90%;
height: 100%;
box-sizing: border-box;
margin: auto;
padding-bottom: 10px;
height: calc(100% - 158px);
background-color:green;
}
<body>
<div class="container">
<nav></nav>
<header></header>
<div class="wrapper">
<div class="main"></div>
</div>
</div>
</body>
class is className inside react.
<body>
<div className="container">
<nav></nav>
<header></header>
<div className="wrapper">
<div className="main"></div>
</div>
</div>
</body>
Some advice that might help you..
Add html, along with body.
html, body {
height: 100%;
}
Make sure the div your bundle is being loaded to has height: 100%;. In the case below "root" would need it.
<body>
<div class="root"></div>
<script src="./bundle.js"></script>
</body>
Last case, if you do something like this:
<div>{this.props.children}</div>
Make sure you give this div a className and add it to the list of things that need to be 100%
I have a responsive layout that requires my image heights be constrained to the available window height (minus header). It works fine with just images in a <div>, but if the images are wrapped in an <a> tag the height is no longer constrained. Resizing the browser no longer has an effect on the image, even as it properly sizes the <a>.
How do I constrain the image height within the <a> tag so it doesn't just overflow? I'm using the jquery cycle2 plugin, so a CSS-only solution is strongly preferred to avoid conflicts.
body, html {
width: 100%;
height: 100%;
}
body {
background-color: #CCC;
font-size: 1em;
margin: 0;
padding: 0;
}
header {
background-color: white;
height: 4.5em;
}
#content {
height: calc(100% - 72px);
max-height: 100%;
text-align: center;
}
#inner-content {
max-height: 100%;
height: 100%;
min-height: 100%;
}
.ps-slideshow-container {
background: red;
height: 100%;
}
.cycle-slideshow {
height: 100%;
max-height: calc(100% - 72px);
background: yellow;
position: relative;
}
.cycle-slideshow a {
width: auto;
height: auto;
max-height: 100%;
}
.cycle-slideshow a img {
width: auto;
height: auto;
max-height: calc(100% - 36px);
max-width: 100%;
display: block;
}
.ps-cycle-meta {
background-color: #999;
}
.wrap {
max-width: 960px;
margin: 0 auto;
}
<body>
<header>
<div id="inner-header" class="wrap">Resize does not work</div>
</header>
<div id="content">
<div id="inner-content" class="wrap">
<div class="ps-slideshow-container">
<div class="cycle-slideshow">
<img src="http://malsup.github.io/images/p1.jpg" alt="image1">
</div>
<div id="ps-cycle-nav-1" class="ps-cycle-nav ps-centered">PrevNext</div>
<div id="alt-caption" class="center ps-cycle-meta">Caption</div>
</div>
</div>
</div>
</body>
Working JSFiddle (just <img>)
Non-working JSFiddle (<a><img></a>)
.cycle-slideshow a {
display: block
}
you can't define a max-height for inline-block in this case.
If you set a height:auto property to your link, his height will takes the height of the image inside. So remove this property and set it a height to 100% to fill the container.
.cycle-slideshow a {
display: block;
width: auto;
height: 100%;
}
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 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>
I have a website made of "pages" (100% height on visible area). Please look at the following css:
html {
height: 100%;
}
body{
height:100%;
margin: 0 auto;
}
.page{
height: 100%;
margin: 0 auto;
min-height: 700px;
min-width: 1024px;
}
.content {
margin: 0 auto;
text-align: center;
height: 100%;
min-height: 800px;
min-width: 1024px;
}
.footer {
width: 100%;
min-height: 200px;
background-color:red;
}
.hidden{
width: 100%;
height: 500px;
background-color:blue;
}
.image {
display:block;
height: 100px;
width: 100px;
}
And this is the code:
<div class="page">
<div class="content">
<img class="image" src="img/image.png1">
<img class="image" src="img/image.png2">
<img class="image" src="img/image.png3">
<div class="hidden" style="visibility:hidden">
</div>
</div>
<div class="footer">
</div>
</div>
I need:
1) the footer to be aligned bottom when the page loads
2) after some seconds, with javascript I show the hidden div, and the footer must slide down.
I can't obtain these two things at the same time, because I can obtain 1) with
footer {
position: absolute;
bottom: 0;
}
but in this way when I show the hidden div it overlaps the footer.
Otherwise if I remove this last code, when the hidden div appears the footer slides down correctly, but when I load the page the footer is not at the bottom.
Does someone have any advice?
How about;
position: relative;
bottom: -100%;
What worked for me is the following code:
.footer {
width: 100%;
min-height: 200px;
background-color:red;
margin-top: 100vp;
}
The thing is that the footer is not seen until the user scrolls, you could
give it a less than a 100vp margin-top but it depends on the footer height which can change.
NOTE: vp means viewport height
You should try with this code:
html {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}