How do I get this Responsive Image, or what is supposed to be, to fit into the parent it is nested in?
I have applied the proper CSS, I have not defined any width or height in the HTML. Here is my CSS.
.header {
height: 25%;
width: 95%;
padding: 2.5%;
background: #fff;
}
.header img {
max-width: 100%;
height: auto;
}
You can view the issue here:
http://www.client.noxinnovations.com/jensenblair/
The big circle image? That's supposed to be Responsive.
Thanks!
I may be missing something here, but setting:
height:100%;
For the image works for me...
You need only to change max-width to width, like this:
.header img {
width: 100%;
height: auto;
}
I know this is an old question, but if you aplly
display:flex;
to the parent all of the block-type elements they will have a max-width of the parent element.
Related
I need to make CSS3's background-size properly work in IE8. There are a lot of javascript libraries out there but they extend the options "cover" and "contain" rather than a px value. As I'm using an image sprite I need to set the background size in pixels.
Here is a demo of my code. The sprite image is 600px 400px but ive set the background size to be 300px x 200px so that is looks crisp on high density displays.
<a class="one">Link one</a>
<a class="two">Link two</a>
a {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 58px;
height: 58px;
background: url("https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png");
background-size: 300px 200px;
} a.one {
background-position: 0 0;
}
a.two {
background-position: 0 -56px;
}
http://jsfiddle.net/rr2obdss/4/
Can I extend support to IE8 without having to create and maintain a 2nd image sprite?
Depending on the specific case, which you don't really explain in much detail, a workaround with pseudo elements may work?
Just add a pseudo element of the specified size and have it have the sprite as background?
With the right combination of position absolute/relative and z-index this could work.
If you provide more information of what exactly you are trying to achieve I will be able to provide better help.
Edit:
Okay, so I got a solution now. Kind of as expected: looks quite dirty.
But that's what you get when you want to do fancy stuff in IE8 :-P
a {
overflow: hidden;
text-indent: -9999px;
display: block;
width: 58px;
height: 58px;
position: relative;
}
a:before {
content: "";
background: url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png);
zoom: .5;
text-indent: 0;
overflow: hidden;
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
}
a.one:before {
background-position: 0 0;
}
a.two:before {
background-position: 0 -112px;
}
The downside of this is, that you would have to calculate the zoom factor instead of just writing down the dimensions you want to have. Also background-position would then be in relation to the full-size background.
Is anything unclear with what I am doing in above code?
The only thing you can do is to :
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='image.gif',
sizingMethod='scale')";
But this can cause issues if you use sprite image.
According to caniuse.com, this polyfill may help.
Hope this helps...
-- Lance
I tried with this but it's not working.. I want the image to change its size proportionately but margin-top and margin-bottom to be fixed in pixels.
#imagenslide img {
margin-top: 100px;
margin-bottom: 100px!important;
width: auto;
height: auto;
position: relative;
}
Any help please? Thanks!
use
#imagenslide img {
margin-top: 100px;
margin-bottom: 100px!important;
width: 100%;
height: auto;
position: relative;
}
or you can also use min-width css property also..
Also try to use width in % for responsive..
I think you're close, but I think it's more simple than you think. Try:
<img id="imagenslide"src="http://placehold.it/350x150">
#imagenslide {
margin: 100px 0;
display: block;
position: relative;
}
JSFiddle
I am currently building a standard html web page. I have a logo in the top right corner. When I resize my browser the logo disappears. It works like it should in all other browsers.
It seems to disappear when my browser is small enough to convey mobile versions and navigation stops being inline and is displayed block
i dont think its an html problem, as it works in other browsers so here is my css for the image.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto;
height: auto;
}
Try adding a min-width. Change 300 to whatever works best. You can also use a min-width %. Like, 20%.
img#logo {
min-width: 300px;
}
edit:
Ok, now I see the real problem, its this
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto; // width auto...
height: auto; // height auto..
}
please change those to an actual value so you don't rely on varying browser defaults.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%; // and you can remove this line
width: 100%;
height: 100%;
}
If that still does not work for you. Try removing the height line all together.
Currently, I am using width: 100% to make my image scale with the window size.
I would like to know how I can make the image scale down and not become distorted.
I simply changed the image width too width: 100% and changed height to height:auto to fix this for anyone that might need to know.
eg.
img {
width: 100%;
height:auto;
}
EDIT:
To ensure image widths don't go larger than their containers
img {
max-width: 100%;
width: 100%;
height:auto;
}
I did this and it worked out for me. I did not want the big slider on the homepage so i resized it, then i found out it was not responsive anymore. I added some codes and tested it, some did not work, some did. Finally this is the code to and resize the slider, and keep it responsive!!
.flexslider {max-width: 700px; margin: -20; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
display: block;
max-width: 100%; height: auto; margin: - auto;
}
}
For my website this is what I am using for the image with regards to responsive design:
.logo {
max-width: 100%;
display: block;
height: auto;
margin-left: auto;
margin-right: auto;
}
The image scales properly width wise but the image's height is too big. In these kinds of situations what can one do to make the image scale properly? If I remove height auto and assign 70px the image looks good when viewed in full version but as you begin to shrink the size of the browser the image looks like it's going inwards.
HOw can i fix this?
try this:
{
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
for this wrapp a div around img and apply the height you want and overflow hide it
.imgwrapp {width:100%;height:70px;overflow:hidden;float:left}
So given the css you have there, the ratio of width to height of the image is what's giving you problems. If you don't like the height of the image when the browser is wide, then you should probably get a different image/crop it. When you set the height to 70px what you're doing is forcing the image into a box that it doesn't fit in, so the image will look funny as it's being scaled weird.
But alas there is another option. here is a jsfiddle that shows only the amount of the image that fits within my first n pixels (in your case 70) so that way it will kind of slide out of view. Check the css here :
.header {
width: 100%;
height: 100px;
overflow:hidden;
}
.everythingelse {
width: 100%;
height: 200px;
}