I have a series of photos of different qualities and sizes. Some vertically, some are horizontal. On the details page, I’ll display each photo at a specific size. How can I control the photos so that they do not stretch and do not scratch their resolution?
I use Bootstrap 4 and Mvc.Core
Thanks
For generic CSS to work on any image with any aspect ratio the usual method is to set one dimension (height or width) then set the other to auto.
I believe Bootstrap has a class for this, img-responsive or similar. That sets the width to 100% (the containing element defines the width) and the height is auto to maintain aspect.
I don’t recall whether that class uses width: 100% or max-width: 100%, but in my own CSS I tend to have:-
img {
max-width: 100%;
height: auto;
}
Because I want all images to be responsive by default without the need for a class and use max-width over width because that stops the images blowing up beyond their native size when in a larger parent element.
It could be done the other way, fixing the height and having auto width, if for example you want rows of images of the same height.
There are also methods to do this with flex. Perhaps Bootstrap 4 has bult-in functions for this too, but I don’t know.
Yes, I do the same, but when the image size is large, the image height on the screen will be very high
And when the photo width is low, a lot of photos will be taken. And if you set a specific height for a photo, the resolution will be lost
I am looking for a solution that I can control such things
One can post a variety of images with different dimensions (& aspect ratios) at the same height (widths will vary), or at the same width (heights will vary). One can set the height or width of each image separately by assigning a unique className to each image. What other choice would you like to see?.. Please describe how would it look (show us an example of how the images would look on a page) and how would you control it?
Choose from one of these. Fixing both would be something of a paradox.
Thankful
My problem is exactly what you wrote. As I can get any photo size, how do I set the page size to display the images properly?
In fact, imagine that Instagram gets a lot of photos in different sizes. What approach does this solve?
What size should I display in the page view of how horizontally and vertically, how and where the horizontal images are displayed.
While each and every portrait and horizontally have different sizes and if they are located in the same frame, they may cause the photo to stretch or not part of the photo …
I have one very simple but apparently very hard request…
With your photo/image editor or using simple code, please create a make-believe page with boxes that represent “properly displayed” images on a page. No image will be “stretched”, cropped, or distorted out of shape. Just draw boxes, each one representing an image. You can assume that the images will be reduced in size to fit within the boxes “properly”.
If you cannot show us how your mind sees “properly sized” images on a page, we cannot help you create it. At this time, your requirements for a web page of “properly sized” images are a fantasy that we cannot see. You don’t have to show us any code, but you must be able to show us how you imagine a page of “properly sized” images might look. We’ll take it from there. If a solution is possible, we’re pretty clever about figuring out how to do it.
Please realize that we are not mind readers or fortune tellers.
thank you very much
I would like to have a page like that, but given the scatter of photos, most of the pictures are not right in my frame.
For example, this photo is at 640x764, and this is seen in the image that is not good at all
my view code this
<div class="container-fluid p-5">
<div class="row">
<div class="col-md-10">
<h1 class=" image-title">@Model.Title</h1>
<div class="row">
<div class="col-md-8 p-0">
<div class="imgdetail">
<picture>
<img class="img-fluid" title="@Model.Title" alt="@Model.ImageName"
src="~/images/@Model.ImageName" />
</picture>
</div>
</div>
<div class="col-md-4">
test test test test test test test test test test test test test test test test
</div>
</div>
</div>
<div class="col-md-2 ">
<div class="row ">
@(await Component.InvokeAsync("NewProduct"))
</div>
</div>
</div>
</div>
and css
.imgdetail {
height: 400px;
max-width: 100%;
overflow: hidden;
}
That is an example of what is “not right”. What we need to see is what it is that is “right” to you.
You don’t need to use the actual images you are planning to use. Just put together a sample page that can show a rough idea about how you want it to look.
So you want to have thumbnail images of different sizes, and display a larger version of them in an area of the page, which must be able to accommodate whatever aspect ratio the pictures have?
not necessarily
I have pictures of different sizes that I do not know how to display them. Just follow the example above to make it look like this
But surely I will not be able to put any picture in a box as an example, because the photos will be terribly awful.
I’m sorry, but I’m still confused. You seem to be answering both “no” and “yes” to my question.
If you want to display a single large image at a time, then perhaps you would be better using a lightbox which can accommodate any size and shape.
Do you mean that for arguments sake you want to display all your images at a specific size of say 300px x 300px (or whatever fixed/percentage size you have in mind)?
Obviously the quality of the images are out of the control of CSS but you can make the image fit into the 300 x 300 space by using object-fit:cover in the css. That will maintain the general aspect ratio of the image while making it fit into a square box fully. It is the same method as using background-size:cover for background images.
Of course that means the image will automatically be cropped to fit unless its aspect ratio exactly mimics the 300 x 300 square box. It does this by increasing both dimensions of the image uniformly until the box is filled completely. If for example you had a very wide image but it was only 100px tall then the height would be increased 3 times to fill the box but in return the image width must also be increased 3 times to maintain the correct aspect ratio for that image. The wider part of the image is then cropped so that only 300px of it is seen in the 300 x 300 box. This could result in important detail not being visible in the new box that you made for it. In the end this is purely a mathematical question as you obviously can’t make an image a different shape but have it look exactly the same.
Here’s an example of using object fit.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.