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;
}
Related
I would like to display full width image in wide format (crop top of image to max-height: 500px;) on desktop display and original aspect ratio for mobile devices.
I am using gantry framework on a Wordpress site. I have used a css work around to force the image to display full width outside the parent boxed container.
Example This crops from the top except there is space pushed to the top when the image height is less than max-height?
.boxed-container{
margin:30px;
padding: 30px;
background:red;
}
.bg-img{
position: relative;
display: block;
overflow: hidden;
padding: 0px;
margin: 0px;
width: 100vw;
height: 100vh;
max-height: 300px;
left: 50%;
right: 50%;
margin-left: -50vw !important;
margin-right: -50vw !important;
background: url(http://www.photographymad.com/files/images/rule-of-thirds-movement.jpg) no-repeat bottom;
background-size: 100% auto;
}
h1 {
position: absolute;
width: 100%;
bottom: 0px;
text-align: center;
margin-bottom: 0px;
}
<div class="boxed-container">
This is where the boxed content belongs.
<div class="bg-img">
<h1>This is the header</h1>
</div>
</div>
This code crops the image the correct way with object-fit:cover
#image {
width: 100%;;
height: 500px;
object-fit:cover;
}
And with #media you could change the height and with however you like to, to fit the screen resolution.
Sidenote: This doesn't work in IE.
EDIT:
object-fit:
fill
The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.
contain
The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.
cover
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.
none
The replaced content is not resized to fit inside the element’s content box: the object’s concrete object size is determined using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.
scale-down
The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
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
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;
}
}
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.
When I insert an image in a container with fixed width and height, the image stretches to fit that space. Is there a way to display the image at its normal size, but with the excess clipped out?
The modern way is to use object-fit: none; (or the more common object-fit: cover; if you want to scale, but without stretching).
img {
object-fit: cover;
}
97% of browser sessions support this as of 2022 May. — Can I use?
If you want to anchor the image to the top left corner instead of the center, add:
img {
object-position: 0 0;
}
<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>
Then in the above DIV you can play with CSS
width/height
background-position
to create different crop effects.
You can use the CSS clip property:
#image_element
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
The downside of using clip is that the element has to be absolutely positioned, and is only available with the 'rect' shape.
See:
https://www.w3schools.com/cssref/pr_pos_clip.asp
http://www.cssplay.co.uk/menu/clip_gallery
Use this :
http://www.w3schools.com/css/pr_background-position.asp
background-position: 5px 5px;
and then set the height and width of the div
height: 55px;
width: 55px;
Show it as a background image