I have a row of responsive images set to 100% height and auto width wrapped in divs with a flexible height. The problem is the width of the parent divs is not changing reliably on browser resize, leaving gaps or overlaps in chrome and ie.
<div><img></div>
<div><img></div>
div {
display: inline-block;
height: 30vh;
background-color: #f3f;
}
img {
height: 100%;
width: auto;
}
https://jsfiddle.net/kyucun6b/1/
This is for my portfolio so people will definitely be resizing the browser, otherwise I probably wouldn't worry about it. Thanks.
The answer in the end was so simple I can't believe it took so long to discover. If you move the height to the images and give them a display: block it works as desired and the parent div resizes perfectly.
div {
display: inline-block;
background-color: #f3f;
}
img {
height: 30vh;
display: block;
width: auto;
}
https://jsfiddle.net/kyucun6b/5/
Related
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 have a fixed height on all my images and need to keep the image in proportion as the screen width gets smaller.
#owl-demo .item img {
display: block;
width: auto;
height: 300px
}
This works fine until I need to put a margin in between the images.
#owl-demo .item {
margin:0 10px 0 10px;
}
The margin won't show and the images are side by side still. The margin will show if I put width: 100%
#owl-demo .item img {
display: block;
width: 100%;
height: 300px
}
But then the image is no longer in proportion.
I tried with Owl's own demo and this is the case. If you inspect one of the images and change it to the code at the top with width: auto you will see the margin no longer works. You will need to remove the max-width: 100% from the img tag from bootstrap also.
http://owlgraphic.com/owlcarousel/demos/images.html
Looks like you're using version 1.3.X
Try upgrading to version 2 and you'll be fine.
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 */
}
I got a div #header width: 1000px;
#header {
width: 1000px;
margin: auto;
height: 164px;
}
A div #main-container in full-width
#main-container {
height: 278px;
background: url(images/mainbg.png);
width: 100%;
}
But when I resize my window to a size less than 1000px setted on header, the #main-container creates a empty space.
http://tinypic.com/view.php?pic=1zcmmpf&s=5
I want to remove this space, and let the #main-container have full-width
What you are seeing is correct CSS behavior.
For example, consider your HMTL snippet:
<div id="header"></div>
<div id="main-container"></div>
with the following CSS:
body {
margin: 0;
}
#header {
width: 1000px;
margin: auto;
height: 164px;
background-color: yellow;
}
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
}
See demo at: http://jsfiddle.net/audetwebdesign/5xwRu/
For pages wider than 1000px, your header is centered as you expect.
Your background image fills up width of the page because the #main-container has 100% width.
As you reduce the page width to less than 1000px, you will see a horizontal scrolling bar appear because the fixed width header is too wide to fit in the view port, which triggers
an overflow condition.
In this situation, the CSS engine creates some white space the right of #main-container since #main-container has a computed width less than 1000px and it fills up the view port width (which is less than 1000px), which does not include the space created for the overflowing content.
You can fix this a number of ways, but it depends in part on what you want to do.
You could set a minimum width as follows:
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
min-width: 1000px;
}
See example 2 in the demo fiddle.
Note: You may have a wrapper container to which the CSS property overflow: hidden is applied. If this is the case you may not see a horizontal scrolling bar.
I know there are a lot of questions about a css 100% height problem.
However I've tried to follow the instructions there and still the height isn't 100%,
so I thought I'd ask the question again.
The site where you can see the problem is:
www.exendo.be
some css styles:
html {
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
}
body {
background: url("/wp-content/uploads/2011/06/bg.png") repeat-x scroll 0 100px #F2F7E8;
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
width: 100%;
}
wrapper {
height: auto !important;
min-height: 100%;
position: relative;
}
footer-container {
background: url("/wp-content/uploads/2011/06/exendo-footer_bg.png") no-repeat scroll center bottom #557F40;
height:146px;
}
As you can see on the site, the footer is too high on the page.
If I inspect the page with Firebug, I can see that the html is 100% height, but the body tag isn't.
The problem both occurs on Firefox and IE.
If anybody could help that would be great!
A number of people suggested position:absolute; bottom:0;
This can cause an issue if the content is taller than the container. The height will not increase so the content will no longer fit and can get cut off or result in ugly scroll bars.
If you can give a fixed height to the container, this is ideal since the height:100% will then work on the child element. In case the content is too large, you can put a background on the child with overflow:visible on the parent, so the content still displays. This helps, but it can still break unless the child is the same width as the parent.
If that doesn't work, I recommend using min-height in em or pixels. This will make sure the height fills the parent, and expands if the content is too long. This worked best for customer comments on www.baka.ca
I think this article can help you.
According to this article:
Assign "position:relative" to your "container" div - page, page-container, or wrapper (I'm not sure to which one of the three, just try), and then "position:absolute; bottom:0;" to your "footer-container" div.
I hope that helps you.
#denappel; give html & body 100% height put footer outside of your main div wrapper & give margin-bottom in minus according to the height of footer.
css:
.wrapper {
position: relative;
width: 700px;
font-size: 0.9em;
margin: 0 auto -142px;
background:yellow;
}
.header {
height: 190px;
background:green;
}
.footer {
position: relative;
width: 700px;
margin: 0 auto;
background:red;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
.footer, .push {
height: 142px;
}
check this example
http://jsfiddle.net/sandeep/tCdPX/3/
this functionally called stickyfooter