I have my img tag defined with some CSS as:
img
{
width: auto !important;
height: auto !important;
max-width: 100%;
}
It works just fine in some of the Mobile Browsers I have tried, as well as Google Chrome on a desktop. However, it does not seem to work in IE or FireFox. By that, I mean, as you resize the window. Take a look at a sandbox site I am working on: http://terraninstitute.com. I have the image on the home page intentionally set to be a huge picture. Also navigate to the Information (main menu) then Newcomers (side menu) and notice the map image at the bottom. On my Droid (and a few other devices I can get my hands on) as well as in Google Chrome this looks pretty good. In IE and FireFox, not so much.
Am I missing something? Conflicting style definitions? I am not finding them as of yet if it is.
TIA
You're declaring the width of your images multiple times in your document unnecessarily and declaring a max-width the wrong way. Max-width is supposed to define a max size/boundary for your images (600px, for example), if you declare max-width:100% in conjunction with width:100%, you're not really doing anything with that declaration as the images will expand 100% as it is.
Remove the width declarations from your CSS in the following lines:
line 116: delete the img declaration all together, it is not needed.
line 365: remove the max-width:100% and height:auto; attribute as they are not needed (and if you can delete the declaration all together as you can declare that elsewhere)
line 121: Now just stick with this one and just add the following:
img {
height: auto;
width:100%;
}
Bootstrap solution for responsive images:
img {
/* Responsive images (ensure images don't scale beyond their parents) */
/* Part 1: Set a maxium relative to the parent */
max-width: 100%;
/* IE7-8 need help adjusting responsive images */
width: auto\9;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Don't use !important
Make your CSS more speficic:
body img {
width: auto;
height: auto;
max-width: 100%;
}
in style.css line line 116, 212 and in inuit.css line 365. Remove all those.
img{
height: auto;
max-width: 100%;
}
Thats all you need.
Related
is there really any way to hide scrollbar in Firefox, without manipulating the padding/margin without set to absolute, and without creating a browser specific css file, I just want to know is there any clean solution like this.
::-webkit-scrollbar {
display: none;
}
Unfortunately this only works for webkit browsers.
html { overflow: -moz-scrollbars-none; }
you can use a trick
add a parent to your elements with this style
html, body{
height: 100%;
width: 100%;
overflow:hidden;
}
#container{
height: 100%;
width: 100%;
overflow: auto;
padding-right: 10px;
box-sizing: content-box;
}
this trick send the scrollbar out of the view , it's exist but user didn't see it
If the size of the content is less than the size of the window, usually Firefox will hide the scroll.
The problem that happens sometimes is that if the size of the content changes for any reason or the size of the window changes to the content, the scroll bar will reappear and cause a mutation in the page.
If you want the scroll to always be visible in Firefox, you can use the following command
html {
overflow-y:scroll;
}
I have an image element that is styled to scale to the screen size within bound parameters defined in a max-width.
This styling works fine. However I home some images that need this maximum size (a percentage) to be removed on smaller screens (under 480px). To do this I need to "unset" a max-width value for the element set by the template structure.
HTML:
<figure class='image left'>
<div class='boxShadowInner wide190'>
<img src='/images/Bag.jpg' alt='text'>
</div>
<figcaption><strong>caption text</strong></figcaption>
</figure>
(The boxShadowInner class sets a feathered border around the image).
Template CSS (standard):
.image.left {
float: left;
display: block;
width: 70vw;
max-width: 90%;
padding: 0;
top: 0;
margin: 0 auto .5rem;
text-align: center;
}
Template CSS (max-width:480px):
.tableBox .image.left:not(.carrier) {
max-width: none; /** THIS LINE **/
width: auto;
}
.image.right, .image.left {
float: none;
}
Noting the line above; I need to overwrite the max-width property set at the base universal level for the style sheet.
What I've tried already:
max-width: none; as suggested on this question (for -height) does not work in Firefox.
The only max-width property that does work as intended (in Firefox) is: max-width: max-content; but as stated on MDN:
"This is an experimental API that should not be used in production code."
Other possible values for max-width do not give any change.
max-content (and similar keywords) are seeingly not ready for production usage according to caniuse.com.
There are multiple images this rule needs to apply to so setting a value figure (280px, etc) is not a possible solution.
I have tried max-width: auto; and Firefox tells me this is an invalid value.
!important makes no difference.
max-width: initial or max-width: unset also makes no difference.
What I'm trying to achieve can be done with this:
.image.left {
float: left;
display: block;
width: 90%;
/* max-width: 90%; // Disabled */
padding: 0;
top: 0;
margin: 0 auto .5rem;
text-align: center;
}
Screnshot of Firefox Developer Tools shows that it works perfectly when manually disabling the max-width rule setting, but I can't simulate this behavior using CSS rules:
How do I overwrite the set max-width property to return it to browser default?
I made a fiddle but it doesn't seem to be working well with media queries..... (I don't use fiddles much I'm afraid)
https://jsfiddle.net/b8bsxtqu/7/
This may not be the answer you're after for your specific situation, but it's how I would approach it.
Instead of writing your CSS for your desktop/laptop and retrofitting it for smaller devices, write your CSS for the smallest devices first, then use media queries to 'enhance' the CSS (with media queries) and visuals for larger devices. This is what's known as a mobile first approach, or more accurately smaller devices first.
Reasons for developing this way.
You start with a simpler CSS code base.
It's easier to maintain and debug.
It keeps you in the mindset of keeping a priority on mobile browsers (have you looked at mobile usage statistics lately? Whoa.)
It puts the priority on content (where it should be)
Applying this to your situation, rather than "undoing" or "unsetting" a style for a small device. Your CSS is written purposely without that style at the start because you're writing for small devices first. Then, using media queries you begin to add styles for larger, more accommodating devices.
In the snippet below you can see that the img has no max-width style applied to start. Then for devices with a min-width of 480px, you can specify your max-width.
img {
width: auto;
}
#media screen and (min-width: 480px) {
img {
max-width: 500px;
}
}
<img src='https://placehold.it/900x500' alt='text'>
I found the issue was that the above max-width was being set on the container rather than on the <img> tag itself where the <img> tag had its own max- and min-width values set and removing/ adjusting these resolved this CSS.
I'm using a 3rd party full-screen slider on the homepage of this website. The images inside each slide are set to be no larger than 75% width, and it seems to work in Safari and Chrome, but not in IE (11) or Firefox.
Any ideas what's going on with this one?
http://www.communitychurchbunnell.com
Set your width to make it work with IE
#main-content #fullpage .section img, #main-content #fullpage .slide img {
width: 100%;
max-width: 75% !important;
}
Also, !important is not necessary.
EDIT
the .fp-tableCell div is being set to the width of the image within.
In the file jquery.fullpage.min.js add max-width:100vh to fix the problem:
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
max-width: 100vw;
}
Apparantly there seems to be an issue with max-width on images inside tables/cells in FF and IE (haven't tested others), but the way I ended up fixing this issue was adding table-layout:fixed; to the element that was set as display:table
Say that i want to have a couple of divs on my page with images in the background (like this: http://www.ubudhanginggardens.com/). I know how to set the size of my divs, but the problem is that the background image stays the same if I make the web browser smaller... I want the background image to scale up/down with the web browser.
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
#container1 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/1.png);
}
#container2 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/2.png);
}
This can be done with pure CSS and does not even require media queries.
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.
Source
CSS:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
And if you want to enforce a fixed max width of the image, just place it inside a container, for example:
<div style="max-width:500px;">
<img src="..." />
</div>
jsFiddle example here. No javascript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
If you would like to have your image scale with your browser, set the width to a percent instead of defining it as a number of pixels.
So if you wanted the image to always cover half of a div:
<div class="my_div">
<img src="http://example.com"></img>
</div>
<style>
.my_div .image {
width:50%;
}
</style>
As you change your browser window size, the size of the image will change. You might want to take a look at Responsive CSS Frameworks, such as Twitter's Bootstrap, which can help you achieve exactly this behavior.
I have a portfolio page with a image display with zoom.
I have this code: http://codepen.io/Mpleandro/pen/LvrqJ
The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.
The image width will be flexible, so I what I want is to make the containing div inherit the width of image.
I tried the css property auto, inherit and min-with, but nothing works!
Could someone help me?
P.S.: I need a responsive solution.
Thanks
since 1 year has passed you may not be interested in the solution, but hope that helps someone else.
I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.
In my case, I set a fixed width for the div
.some-div{
width: 250px;
}
I also had responsive image:
img{
display: block;
max-width: 100%;
height; auto;
}
and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:
#media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
For my project the threshold was 917px when the fixed width started to affect.
I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.
I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.
auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.
Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.
My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.
I'm not sure if this is what you mean, but if it is, I hope it will help!
If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.
The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.
Put together, it would look like this: http://codepen.io/anon/pen/IluBt
JS line 17:
$(".display").css("display","inline-block");
CSS for .display
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
And to align everything nicely:
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}