I already input width: 100% but it wont respond on anything. How do I get the header to respond on all browsers and ipads, phones, etc?
.head-wrap {
background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/We-are-prodigy-dumbell-weight.jpg) top no-repeat;
margin: 0;
height: 480px;
width: 100%;
}
.site-header {
background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/Prodigy-Performance-we-are-prodigies4.png) no-repeat;
margin: 0;
width: 100%;
height: 420px;
}
.site-header .wrap {
padding: 16px 0;
padding: 1rem 0;
}
You can try setting the background-size style of the header to 100%; You may be dealing with some browser compatibility issues (see here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
You could also remove the background-image property, and fill the content with plain img elements, with absolute positioning, then set those img elements to be width: 100%;
Your div is also constrained to a height of 420px which is going to screw things up. Set a max-height of 420px, and a height of auto (see here: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)
You'll probably have to make your two background overlapping background images the same size (since the dimensions are different they might have different ratios of width/height), and use some media queries to clean things up, though, to make it work 100%.
Related
I'm trying to create a lightbox where the current image takes up 90% of the height of the page OR a 900px width, whichever one happens first.
Naturally, I used the code below, expecting it to fail. I was right. I tried using the aspect-ratio property (which is frowned on because of its lack of browser support), but nothing worked.
Anybody know how to achieve this?
/* Basically the lightbox container */
.modal {
position: fixed;
width: 100%;
height: 100%;
}
/* Each image has the class mySlides */
.mySlides {
max-width: 900px;
max-height: 90%;
margin: 15px 5%;
}
Alright, a comment from Amaury Hanser got me on the right track. The solution that worked was using object-fit: contain;. This link helped me learn what that is. The property basically makes an object fit within the borders of its parent container while maintaining its aspect ratio.
This is my code now:
.modal {
position: fixed;
width: 100%;
height: 100%;
}
.mySlides {
max-width: 900px;
max-height: 90%;
object-fit: contain;
margin: 15px 5%;
}
The image is stretched when I try to make the size smaller.
http://jsfiddle.net/QEpJH/878/
.container img {
display: block;
width: 100%;
height: 60vh;
/*object-fit: cover; // doesn't work in Internet Explorer */
}
You need to make it scalable by 1:1
so use
width: auto; instead of width:100;.
or use height: auto; and width: 100%; in case you want to cover the whole width.
But remember if you cover the whole width, the height will increase.
If you set the width to auto, the image will adjust itself to the given height without any stretch.
.container img {
display: block;
width: auto;
height: 60vh;
}
if you set the image as a background instead and use
background-size:cover
you will lose the stretching but some of the image may get cut off
to counter this slightly you can use
background-position
to position the image in a more desirable place
Try ratio in only percentage or use similar ratio
.container img {
display: block;
width: 30%;
height: 30%;
/*object-fit: cover; // doesn't work in Internet Explorer */
}
I'm using the technique from this answer to create a DIV that maintains its aspect ratio when the browser viewport is resized.
However, I want the DIV to only get so big and then stop. But, if I apply max-width: 300px; to the containing div, the div will stop expanding its width when the viewport gets big enough, but the height keeps going, losing the aspect ratio. If I apply max-height: 60px;, it has no effect whatsoever.
How do I get a div to expand with the width of a viewport, maintain its aspect ratio, and stop expanding both height and width at a specified maximum width?
Live code here.
body {
width: 36%;
margin: 8px auto;
}
div.stretchy-wrapper {
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
max-width: 300px;
background: blue;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
color: white;
font-size: 24px;
text-align: center;
}
It looks like the issue is because of the padding which increases the height by % based on resize
below is the example in which i have added box-sizing:border-box; and gave height which on resize remains the same
http://dabblet.com/gist/85df841bd1602d24829f
One possible solution seems to be to simply create a containing div around the wrapper div, and apply max-width to that.
I'm currently working on my very first responsive webdesign working with Bootstrap 3.
What I now have is a full-width grid of user profile images. These images have a parent container which must be fully filled by the image. The parent container must have a fixed height because of the requested layout.
The problem is: Using CSS I only know how to fit either the width or the height, not depending on the size of the container.
You can see the problem in this jsfiddle:
http://jsfiddle.net/usD2d/
li /* container */ {
display: block;
overflow: hidden;
float: left;
width: 25%;
height: 100px; /* something fixed */
}
li img {
width: 100%;
min-height: 100%; /* destroys aspect ratio */
}
If you have a large screen, the images will fit perfectly. Having smaller devices the images will lose their aspect ratio.
Surely I could use #media(min-width) and change the img from width to height, but due to using BootStrap and having a very dynamic layout (collapsing sidebar, etc) this could become very tricky.
Is there any CSS only solution? If not, is there a great jQuery solution maybe also providing a focus point where to keep the focus on when cropping?
Thank you very much in advance!
If you want to fill entire space with image clipping it, ratio will be preserved but image will be partially hidden. vertical-align and negative margin can be used.
example: http://jsfiddle.net/usD2d/2/ keeping center image in center(like would a background-position: center center ;.
ul {
width: 100%;
}
li {
display: block;
float: left;
width: 24%;
height: 150px;
overflow: hidden;
border: 1px solid black;
text-align:center;/* set image in center */
line-height:150px;/* set image or text right in middle;*/
}
img {
min-width: 100%;
vertical-align:middle;/* okay see it in middle , but you can tune this */
margin:-50% -100%; /* okay, you can tune margin to crop/clip other area */
}
the negative margin reduce virtually size of image wich will center(text-align ) and sit on baseline set by line-height.
This a CSS cropping.
I think that you want the image to determine the width of the <li>. I removed the width: 25%; property, and your images kept their aspect ratio in your fiddle. So change
li /* container */ {
display: block;
overflow: hidden;
float: left;
width: 25%;
height: 100px; /* something fixed */
}
to
li /* container */ {
display: block;
overflow: hidden;
float: left;
height: 100px; /* something fixed */
}
The site in question is 1000freewebsites.com. The specific pages I'm struggling with are:
1000freewebsites.com/signup.php
1000freewebsites.com/login.php
This site uses the skeleton framework and Ryan Fait's sticky footer. On these pages I have a div with the ID of #bluestripe that should fill the vertical space between the header and the footer.
There are three parent elements; #html, #body and .wrapper. All are set to height:100%; in the stylesheet. #bluestripe is also set to height:100% and min-height:100%. As I understand it, this should achieve the effect I desire. Do I have my theory wrong?
Using Chrome Inspector I find that the height attribute is crossed out for .wrapper. If my theory is correct, this explains why #bluestripe is not expanding to fill the vertical space.
I cannot find any element that over rides .wrapper's height setting. Can you see what I am missing?
Your CSS rule for .wrapper has 2 height declarations. Get rid of the one setting height to auto.
.wrapper {
min-height: 100%;
height: auto !important; /* <- Get rid of this one */
margin: 0 auto -40px;
height: 100%;
}
this is your css:
.wrapper {
min-height: 100%;
height: auto !important; //height here
margin: 0 auto -40px;
height: 100% ;//height again here
}
you are defining two times the height and as the first one got !important its overriding the second one
this cause another error, because the paddings and the other elements are pushing the .container div down, so if you change a few properties you can get rid of this behavior:
#bluestripe {
background: #0099cc;
width: 100%;
padding: 40px 0px 40px 0px;
border-top: 10px solid #666666;
/*height: 100%; drop this line*/
}
.wrapper {
background: #0099cc; /*add this line*/
min-height: 100%;
margin: 0 auto -40px;
height: auto; /*acording to ryanfaits's css this is what mades the footer stick to the botom*/
}
this will made the .bluestripe shrink again but as the .wrapper still has the same background color, it doesn´t matters