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
Related
Assume:
you have an image that is wider than the screen into which you want to add it.
you must not allow the image to be resized to fit the width of the rendered result's screen.
you don't want to need to specify manually the px size of any element to match the size of the original image.
you may specify an arbitrary px size that you'd not need to update depending on new images that you might want to add to the document.
All markdown previews or outputs that I've seen automatically resize your image to fit the screen horizontally. Intellij, Ms Visual Code, Github...
I dug into the deepest recesses of the Internet and could find rare people asking about this and no answer that works for my use case.
Looks like with pure markdown it is impossible at the moment of this writing.
With HTML+CSS I can almost make it work playing with one or more of the following:
// on divs containing the image
overflow: ...;
overflow-x: ...;
width: ...;
max-width: ...;
display: ...;
// on the image
object-fit: none; // with this the image gets cropped unless you force the width of some container to be bigger than the width of the image (in px values)
float:...;
The closest that I could get is:
<style>
div.outerDivImg {
overflow: scroll;
// without this, the container grows in height and your horizontal scrollbar gets far down
// so it obligates you to scroll all the way down to be able to move the horizontal scrollbar.
max-height: 100vh;
}
div.innerDivImg {
// if you remove below, the image gets resized.
// if you remove below and put "object-fit: none;" on the img, it gets cropped to fit the screen.
width: 8000px;
}
</style>
<div class="outerDivImg">
<div class="innerDivImg">
<img class="innerImg" src='img/German-Cheatsheet.jpg'></img>
</div>
</div>
But this has the side effect of producing a horizontal bar for the div that goes further to the right than the inner image.
Cheers
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
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
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 have these images in my webpage, that I want to automatically shrink when the viewport's width is reduced. I am using the following CSS to do this:
.autoResizeImage {
max-width: 100%;
height: auto;
width: auto;
}
The images which I want to resize are of two types:
Ones which are inside td's in a table
Ones which are not inside a table
On Chrome, images of both types shrink automatically when the viewport's width is reduced. However, on Firefox and Internet Explorer at least, this shrinking is only happening for the second type, and not for the first type (a scrollbar appears instead).
JSFiddle: http://jsfiddle.net/ahmadka/raSSq/2/
Notice that the small cell contained images do NOT resize in Firefox/IE, however the banner at the bottom DOES resize.
Can someone figure out what the issue is ?
Couple of things:
width:auto; will tend to make the image use its actual width, rather than stretching to fit a larger area. You should use width:100%;
Once your images are set to use 100% of the available area you also need to set your table to use 100% of the available area via width:100%;
Result:
.autoResizeImage {
max-width: 100%;
height: auto;
width: 100%;
}
.imageTable table {
width:100%;
}
This seems to work as a basic solution for me here: http://jsfiddle.net/5AYWd/1/
Also, if you want the images to stop growing at a certain point, that is when you'd use max-width. You might want to set a max-width on the table as well.
Something like this.