When the viewport is larger than the width of the image, the image is centered, but when the width of the image is larger than the width of the viewport, the image is aligned to the left rather than to the center. The effect I am aiming for is for the image to always be cropped to the width of the viewport and always be aligned to the center.
body,
html {
margin: 0;
padding: 0;
}
.crop {
width: 100%;
height: 50%;
overflow: hidden;
background-color: red;
}
#cropped-img {
position: relative;
height: 100%;
display: block;
margin: auto;
}
<div class="crop">
<img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" />
</div>
You can achieve what you want with flexbox:
body,
html {
margin: 0;
padding: 0;
}
.crop {
overflow: hidden;
background-color: red;
display:flex;
justify-content:center;
}
<div class="crop">
<img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" >
</div>
Nevermind, I managed to get the exact effect I needed using the background-image property. Here is the HTML and CSS I used if anyone else is interested:
HTML:
<div class="crop"></div>
CSS:
body, html {
margin:0;
padding:0;
}
.crop {
width: 100%;
height: 500px;
overflow: hidden;
background-image: url("http://img1.jurko.net/wall/paper/donald_duck_4.jpg");
background-repeat: no-repeat;
background-position: center;
}
Try giving variable values the image that occupy 100% of width of the element
body,
html {
margin: 0;
padding: 0;
}
.crop {
width: 100%;
height: 50%;
overflow: hidden;
background-color: red;
text-align: center;
}
#cropped-img {
position: relative;
height: 100%;
width: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
}
<div class="crop">
<img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" />
</div>
Related
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 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%;
}
The page open with scroll. I want to make the page appear fully responsive without any scroll bar. I tried to set the height to 100% with no luck.
html {
height: 100%;
width: 100%;
}
body{
width:100%;
hight:100%;
margin: 0;
padding:0;
}
.main{
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
margin: 0;
padding-top: 30vw;
background-size: 100%;
}
.marquee {
display: block;
position: relative;
width: 51vw;
margin: auto;
}
marquee{
width: 100%;
margin: auto;
display: block;
}
#btn1 {
background: url("http://www.ghadaalsamman.com/new/images/enter.gif") no-repeat scroll center center ;
display: block;
height: 53px;
margin: 0 auto;
position: relative;
width: 50%;
background-size: 100%;
margin-top: 33%;
margin-bottom:1%;
}
.button {
padding: 5px;
}
.container {
display: block;
height: 100%;
margin: 0 auto;
max-width: 960px;
position: relative;
}
#media screen and (max-width:500px) {
#btn1{
background-size: 100% auto;
}
}
<div class="main">
<div class="container">
<div class="marquee">
<marquee scrollamount="3" direction="right" dir="ltr">
<h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>
<img height="auto" width="200%" src="http://www.ghadaalsamman.com/new/images/image21.png">
</strong></h3>
</marquee>
</div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>
</div>
</div>
This is the problem
body {
width: 100%;
hight: 100%; <----- 'hight' make it 'height'
margin: 0;
padding: 0;
}
Replace with this
body {
width:100%;
height:100%;
margin: 0;
padding:0;
}
the ratio of your image will make it difficult i believe.
Since you started using vw units, maybe it's an hint to use vh units and max-width too.
Because of your image, too much like a square, the container needs too be a bit smaller to stay in sight. Because of , vw units, i would propose to use display:fle to easily center you container :
DEMO of my idea
CSS updated :
html {
height: 100%;
width: 100%;
}
body {
width:100%;
height:100%;/* UPDATED*/
margin: 0;
padding:0;
display:flex;/* UPDATED*/
}
.main {
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
margin: 0;
padding-top: 15vh;/* UPDATED*/
background-size: 100%;
width:100vh;/* UPDATED*/
margin:auto;/* UPDATED*/
max-width:100vw;/* UPDATED*/
overflow:hidden;/* UPDATED hide marquee*/
}
.container {
display: block;
height: 100%;/* useless when parent has no height given */
margin: 0 auto;
position: relative;
}
This seemed simple in my head.. But it's not. I have 2 div's. floating next to eachother
The right div should have an image that is always sticking to the footer
It's not even applying the 100% Height of my .block div, the parent div ( body ) is also set at 100%
For some reason this is not working with my following code.
JSFIDDLE
HTML
<div class="header">
Header
</div>
<div class="block">
<img src="http://www.zwaldtransport.com/images/placeholders/placeholder1.jpg" />
</div>
CSS
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
}
.header {
float: left;
height: 100%;
width: 40%;
background: red;
}
.block {
float: left;
width: 60%;
height: 100%;
background: green;
}
.block img {
max-width: 100%;
}
You can try this. check and let me know, have you asked for this:
.header {
height: 100%;
width: 40%;
background: red;
}
.block {
position:absolute;
bottom:0;
width: 60%;
height: auto;
background: green;
}