In my project all images inside a container have the css attributes max-width: 100%; and height: auto; to scale images down when the viewport shrinks and the container shrinks.
This is working, but the price to pay is that the browser is not able to draw the page correctrly without loading the images to get the dimensions.
When I embed the image via <img width=100 height=100 /> the browser normaly reserves the space and renders the rest of the page.
As soon as the above mentioned css is applied, the site content below the image “jumps” because the image is 0x0px during load progress.
This leads me to two questions:
Is there a way to use the max-with 100/height auto technique without destroying the normal placeholder behavior?
If not, what would be a correct class declaration to apply for some of the images that should not auto-resize and loaded normally, with correct sized placeholder during load? I tried height: initial and height: inherit, in both attempts the image is still 0x0px before loaded, the html height attribute is ignored.
I created a fiddle, but the loading problem cannot be seen here due to caching; Therefore, I copied the code from https://jsfiddle.net/yrx52avq/4/ to http://www.testserver01.de/fiddle.php and added delays and no-caching options.
Reload the page: The red boxes pop out during load progress. The green ones do not.
In your css, please try the below code using the property object-fit:cover or object-fit:contain. This property will resize your image to fit in the container.
.container img {
object-fit:cover;
max-width:100%;
}
or
.container img {
object-fit: contain;
max-width:100%;
}
you can find more information on object-fit property from the w3schools
Related
I'm testing out the following game (repo here) which has been set to the following css properties:
.game {
min-width:400px;
max-width: 660px;
margin: auto;
}
The game app has 16 divs with class=container, and inside each of these there is a div class=card that has 2 figures (one with a class = "front" and one with class = "back") - see screenshot from Chrome Inspector tools below
The class=front parts of the cards have been given an image each, defined by the following url() code example in the css file
[data-card-type="B2"] .front {
background: #f5f5f5 url('../img/img4.jpg');
}
When resizing the whole window where my game is, I can see that the div containers also get resized, affecting the content inside them. This causes the images to get cropped so that only a portion of them shows:
Only when the div containers are at their full size, the images inside them are able to show fully.
I've tried to modify lots of different css variables (eg. setting a min width for the div containers, or for the front class) to stop the images from being "cropped", see below example for the class:
.front {
background-color: #ffb3b3;
min-width:100%
}
but none of these changes have worked.
Where exactly do I need to modify the code so the images stop cropping, and always show a responsive resizing (eg. get smaller or bigger but always show the whole image content)?
If the aspect ratio is right, I think you could use background-size: contain; in the figure css
I'm working on creating a fallback image inside of my class that creates responsive images, but I am stuck with trying to fix a problem for IE. Since I cannot use things like <source>, object-fit and srcset I am up against a challenge. The image is placed underneath the content so it will size to the height of the div content. The image should cover the whole background of the div that contains the content, but the problem is that the width presses the image to this compact size that looks awful:
I will provide you with a jsfiddle: https://jsfiddle.net/6Lxwesvf/7/ .
I made a copy of one of the wrappers it does exactly what it does inside of the IE. So I hope someone knows something about making the image not look all pressed by the width.
Change this
height: 100%;
to this:
min-height: 100%;
min-width: 100%;
margin: auto;
Working pen: https://codepen.io/sidhanshu28/pen/ERNwxz
I am using simple css code for Profile Image Styling, but Image is stretched. How can i fix it?
Take a look at the Profile Images in this Picture:
Right Now I am Using this Code:
.Comment_Image_Size {
height: 32px;
width: 28px;
}
I also used this Code but in this case some Images are Bigger and some are smaller in height:
.Comment_Image_Size {
width: 28px;
}
Don't fix the image dimensions, I think the project you are working on should be dynamic, if it's yes, than you can also resize the images via server side, if you don't want to do that, and want to stick with HTML and CSS, than use a wrapping element, say div, float it to the left, assign some fix height & width and assign a class, and than use the below snippet to
div.class_name img {
max-width: 100%;
max-height: 100%;
}
This way, your image will resize proportionally and it won't be stretched anymore
Demo (I've attached both examples, you can check out in the demo)
In the above demo, the first one is which I've suggested to you, other is one which you are probably doing, which is stretched, so go for max-height and max-width properties.
best solutoin to give max-width and max-height to your class
.Comment_Image_Size {
max-width:28px;
max-height:32px;
}
The issue is that the original images are not the same aspect ratio. You need to specify the right height and width for each image to ensure that the maximum width/height is not exceeded (one will be less if not the right aspect ratio).
You may need to resize the images upon upload to have thumbnails that are the right size while preserving the aspect ratio How to resize images proportionally / keeping the aspect ratio?
I created an email template with a banner at the top of a two column table. Everything is good except the top banner. When the email is sent out, the picture gets resized if the window is smaller than the banner itself.
How can I keep the picture from automatically resizing itself if the mail window is small?
This is my code for the banner:
<img style="width: 710px; height:191px;" alt="" src="banner.png" height="191" width="710" />
The src has a whole URL that went there. I just shorten it to just the picture.
If you set the size of the image in a CSS file, it should not change.
.image {
width: 200px;
height: 200px;
}
Then apply this style to your image.
depending on the email client this may/may not work, it depends on whether the CSS directives are supported if it's webmail it most likely will be supported
Additionally make sure that the img tag's parent element has the proper width style.
if it's embeded in the the table as a colspan2 then make sure the table has the min-width set as well.
I was trying to set an image as background image for my django application. But when i set it, it is getting displayed as tiled image. ie without actually stretching the image, same image is tiled and shown 4 times. Can somebody tell me how to stretch the image and set it as a background image. I will paste my code here. I am sure some attribute must be there setting this, which i couldnt find on googling.
<body bgcolor=" #408080" background="/static/paper.jpg" background-size: 100%; >
Instead of using a background image on the body tag you should add a image tag right below body, set the position to absolute and a low z-index and then have width=100% and height=100%.
You need to apply this as a style, not as an attribute. That will work if your browser supports CSS 3:
style="background: url(/static/paper.jpg); background-size: 100%;"
Some background info:
http://css-tricks.com/perfect-full-page-background-image/
http://css-tricks.com/how-to-resizeable-background-image/
In short: no, you can't stretch the background image with html/css1/css2, you're only options is to either use css3 ( witch is not fully suported by all browsers ) or to use background-attachment and background-repeat css porperties to achieve an alternative result …
Another option would be to use an img tag as a background using z-index css proprety however you'll find it dificult to get it working proprely in all major browsers .
You can stretch your background to 100% width and height by putting your image in an <img> tag and give it a z-index of -1 so it acts like a background and is behind everything else. This works in all browsers.
<img src="..." />
img{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
If you do not want to break the aspect ratio, just set either width or height and not both.
Check working example at http://jsfiddle.net/UXBRM/1/
Edit your image with paint. Click image and save your image according to your need.
This will work in any html , surely.
As others mention, you should always try to define as much of the attributes in your css and not directly where you have the path to the image itself. This is how it was done way back and is deprecated and probably why it is not working.
use the img src="poefwpf.png" and maybe a to easy edit in your css:
#imgex img {
width: 100%;
height: 100%;
(maybe also z-index:-1;)
}