Using Twitter Bootstrap v3.1.1 I created a custom WordPress theme for a client. All was going well until I realized in IE and Firefox the images were showing full size and outside of the boundaries of their parent elements even though I have max-width: 100% set.
I did some hunting around on the internet for options, naturally, and it was mentioned to put height:auto; on the img tag. This nearly worked, but images began to be stretched in some places, and still not obeying max-width in others.
Here is an example of images in widgets in the sidebar not obeying max-width: 100%
I hunted around some more and came across more hacks for Firefox and IE. Then Chrome started to misbehave as well. Now I have a messy stylesheet with tons of CSS hacks and there are still issues with images being stretched or showing full size. One of the suggestions was to mess with box-sizing and set the width of img to 100%, which results in the below with smaller images than the width of the parent container being stretched.
I'm about to go back to the drawing board where I'm only using max-width: 100% and start over.
My question is: how can I get ALL images used on WordPress to behave correctly and follow the max-width: 100% CSS rule? This is a responsive website and I need all images to stay within their containers, NOT be stretched or skewed, and grow/shrink while constraining proportions as the browser size changes.
It's not because of Bootstrap and WordPress together - we use it all the time. You can use
img {height: auto; max-width: 100%;}
and that will make all of your images responsive, which will also fill their containers up to 100% of the original image width and resize the height to maintain the aspect ratio.
If your image's container is 1000px, however, and your image is originally 500x250, the image will only fill up half the container because max-width: 100% will give the image a max-width of 500px.
You can use
img {height: auto; width: 100%;}
and that will ensure that your image fills the entire container. But beware - in the above 1000px container / 500px image scenario, your image will scale up and might begin to look pixellated.
Another thing to note - your images might be overriden in the widgets. For example, one popular sidebar images widget hardcodes the width and height into an inline style (a horrendous practice and I hope they stop it). You can override that and make it work with:
img[style] {height: auto !important; width: 100% !important;} //or
.widget[style] img {height: auto !important; width: 100% !important;}
I'm willing to bet that your sidebar image problem is that there are styles (via the plugin css or inline) that are overriding your original image settings.
So this ended up not being specific to Bootstrap or WordPress. It was a combination of
A style I had copied in from who knows where a { display: inline-block; }
Bootstrap box-sizing on all elements
WordPress using width and height attributes on images
After I took out the weird a { display: inline-block; } (that I still don't even know how got there and can only assume I was tired and loopy), most of the image issues went away. I just had to target a few instances of images to get them to behave.
I'm happy to know I can use Boostrap in the future to help speed along project styling. Thanks, everyone, for the help!
Related
I need to make the gray sidebar of this page to occupy the left height of the page, going all the way down the page and touching the blue footer, without hacking it too much with things that might make the page looks higher than it really is.
I have tried using height: 100% and position: table-cell, amongst many other suggestions I googled, but nothing really worked.
Is it possible using Twitter Bootstrap?
jsfiddle: https://jsfiddle.net/3cb30uz1/1/
You could set min-height: 100vh on the sidebar, which would ensure that the height of it is at least 100% of the viewport height. Or, since you have a header, you could use calc() to subtract.
In this case, set this on the primary sidebar element:
min-height: calc(100vh - 172px);
Im trying to build some fancy item grid by using bootstrap and flex. Therefore the item image always has to extend to 100% width of available space by keeping the 1:1 ratio.
http://www.bootply.com/kPLGHtA7Kh
I got it to work by using the css background image. But I struggle to make it look the same by using an img-tag. Im running out of ideas, hope you can help me.
In your CSS just specify the width: 100% on your image and don't touch the height (or set it to auto which is the default).
The parent of your image should also have a position:absolute or position:relative in order for the width to work properly
Demo : http://jsfiddle.net/s3spdy5z/
I think the images are pushing the width of the boxes to the max-width so kind of overriding the flexbox settings. With the background images you basically don't have any content inside them so flexbox can calculate the widths and not worry about content. The images are set to 100% but it thinks you want 100% of the max-width therefore the grid doesn't fit anymore.
If you set width: 33%; on the .flex-item and remove the min and max the grids will look the same.
If you go to http://digitaldemo.net/anova/ and resize the browser to make it smaller and then scroll horizontally to the right, you will see that the background now covers the part of the page outside the wdith of the visible screen.
Why is this happening?
Any help would be most appreciated!
Best,
Cynthia
Add this.
#navbar{ min-width: 1100px; }
same to .footer, .wrapper, and .footerbottom
min-width:1100px
The problem is because the #nav element has a hard width of 1100px and a width:100% background on another element is only 100% of the width of the viewable area.
Changing the min-width on the <body> to
body {
min-width: 1100px;
}
will set your minimum page width to be the length of your longest element and therefore the CSS background will extend as it will be 100% of 1100px wide.
For future projects I'd recommend reading responsive web design - one aspect being to design a site will adapt to the available width/height of a device, through a combination of non-fixed dimensions on elements and/or CSS Media queries.
I just debugged your code and found out the issue. The issue is you are using overflow:hidden property. It is causing problem. like in class (.masthead) you apply this. Just remove it. then it is visible.
I'm working on a custom stylesheet to override this site. https://adminluonline.blackboard.com/. Essentially we want the page elements to load as 100%. They all seem to assume that 1000px is the min-width for some reason. They'll stretch out past that as far as I want but won't go smaller.
I'm using the stylish Firefox plugin and am using !important to override. I've even gone as far as telling everything but 1 div not to display. However even with just one div, with no padding and no margins, it won't cooperate. Does anyone have any suggestions as o what could be my next steps?
#loginpane has a fixed width of 800px. That's what's causing the page to stop shrinking. Either use media queries or change this and the child elements which have a static width of 600px
Line 3 of theme1.css:
body{ min-width: 1000px; }
Probably the problem.
I have made a little gallery (http://www.kongeboa.dk/billeder/3/Coco/)
If you refresh, and choose to view one of the other thumbnails below the actualy image, you will see that the image resizes randomly...
I have a width on the image tag set to 100%
I am sure, that all the images has a size of 460px to fill the width of the design.
When all thumbnails have been viewed, the big image shows in the correct size (460px)
The problem happens in Safari and Chrome. OSX and Windows.
I have no idea why this happens, and i dont know how to debug it...
In short: remove float: left; from the '.image' style.
Since the '.image' style makes the div containing the image float left, the 100% is relative to the size of a div which sizes to fit the image, so you'll probably get variable results in different browsers. If you remove the float: left; from the '.image' style, it'll fill 100% of the width, and the image will in turn fit 100% of its width, and everything should be grand.
You should remove float: left from .image.
It's some kind of WebKit bug from some combination of width="100%", the shrink-wrapping behaviour of float: left, and image caching.
Live Demo - (check it in Chrome, you'll see the image is full width)
If you know they've all got a width of 460px why not set width="460"? As far as I can recall percentages for img.width are not part of the HTML spec.
If you want to make sure the image always fills its container, then what you want is the CSS style width:100%.
I give it a try...
Remove width="100%" from the img-tag and remove width:100%; from the .img class. Not sure if that solution would work for you?