Max-width/height without stretching smaller images? - html

I have modal images on my site, and I have set a max-size (in the css code) on them so they're not too big when opened up.
But, I also have some images that are smaller than my set max-size, and these are now getting stretched out when clicking on them. I don't want that. I want them to stay in their original size, even though they're small.
How do I do this?
This is the html and css (and Javascript) I've been using:
https://www.w3schools.com/howto/howto_css_modal_images.asp
Is there something in there that's stretching out my smaller images?

First warp the images into a <div> </div>
Then set that min-width to the div not the images
css
.wrapper {
min-width:; /*set min width*/
max-width:; /*set max width*/
}
.wrapper img{
width:100%;
object-fit:contain;
}
html
<div class="wrapper">
<img src="image.jpg">
</div>

If you set the max width and height for images then they will not exceed those but if the image's natural dimensions are both smaller they wont expand (unlike if you had set width or height). There will be no stretching or distortion, just larger images will be show smaller than their natural size.
This snippet shows images of various natural dimensions with their 'limited' versions following - the max width and height having been set as the smaller of 50% of the viewport dimensions and an absolute pixel size.
img.limited {
max-width: min(50vw, 500px);
max-height: min(50vh, 250px);
}
max-width = min(50vw, 500px);<br> max-height = min(50vh, 250px);<br>
<br>img dimensions 100 x 150<br>
<img src="https://picsum.photos/id/1015/100/150" />
<img class="limited" src="https://picsum.photos/id/1015/100/150" />
<br>img dimensions 1000 x 300<br>
<img src="https://picsum.photos/id/1016/1000/300" />
<img class="limited" src="https://picsum.photos/id/1016/1000/300" />
<br>img dimensions 200 x 200<br>
<img src="https://picsum.photos/id/1018/200/200" />
<img class="limited" src="https://picsum.photos/id/1018/200/200" />
<br>img dimensions 300 x 1000<br>
<img src="https://picsum.photos/id/1019/300/1000" />
<img class="limited" src="https://picsum.photos/id/1019/300/1000" />

Related

How do I code my website so that my 100% width images adjust size according to screen resolution changing?

How do I code my website so that my 100% width images adjust size according to different screen resolutions? For e.g. 1280 x 720.
Here is the link to my home page with the images that need resizing according to screen resolution. Look at Lines 119 to 123 for image codes.
You have put a height of 700px+ on your images using the img in css. Add another class in css saying:
.full-width-img{
width:100%;
height:auto;
display:block;
}
Add class="full-width-img" to your images you want to have 100% width.
EDIT
Remove the width qnd height from your img tags. BEcause right now they are:
<img src="images3/motoxmaxres.jpg" class="full-width-img" width="100%" height="" alt="motocross landing">
While it should be
<img src="images3/motoxmaxres.jpg" class="full-width-img" alt="motocross landing">

Stopping image to resize and hiding bottom scrollbar

How can you stop image being resized by the browser? I want image to have certain width so I'm using <img src='src' style='width: certain_widthpx' />.
However when you resize the browser width, the scrollbar in the bottom appears which I don't want. How can I stop that?
You need to provide a simplified version of your DOM in the question. Assuming parent of img is body
Add this css rule to the parent.
body{
overflow-x: hidden;
}
You should specify image minimum width and height:
<img src="http://via.placeholder.com/800x800" style="min-width: 800px; min-height: 800px;" width="800" height="800" />
As you asked you want your image not to be resized by the browser, browsers resize contents within a window based on the view-port. Every time you'll try to resize your browser, view-port will change, so to maintain the user's viewing experience content gets resized. Now as you showed <img src='src' style='width: certain_widthpx' />, here you're trying to give your image a fixed width that means you're restricting the view-port to hold the image at this fixed width and hence at view-ports lesser than your image's width, horizontal scrollbars appear. If you really want your image to be of that fixed width then you should contain it within an another holder and give an overflow-x to be scroll/auto.
Like this:
<div style="overflow-x: auto;'>
<img src='src' style='width: certain_widthpx' />
</div>
OR there is one more way and that is CSS way
<div class="holder">
<img src='src' />
</div>
CSS:
.holder { overflow-x: auto; }
.holder img { width: certain_widthpx; }
In above solution your image will hold that fixed width but the holder will adjust itself as per the view-port and the point where your image's width will be greater than the view-port holder will start showing horizontal scrollbars, but the browser window will not.

How can I ensure that my images look clear on my website

I'm currently working on my portfolio and I'm at the stage of adding images from my computer. However, when I upload an image it only looks clear if I don't change the width/height in my html. Whereas when I do change the width/height it becomes stretched and unclear.
This is an example of the image that has had its width/height changed -
Here is the image when I dont change the width/height -
The current image i'm using is a jpeg and the dimensions are 1920 × 1044
I'm resizing the image using this method -
<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="width:250px;height:300px;" />
Take a look at my codepen to see more. I'm using placeholder images here for the time being. Ideally I would like my own photos to be as clear as the photos on my codepen. -http://codepen.io/jordan_miguel/pen/gLwJRb?editors=1100
Your resizing is not proportionate. If you do something like style="width:50%;", the the image will display proportionally but at the specified size percentage.
You need to resize it and also keep the aspect ratio of the original image to avoid stretching it.
For example:
<img class="fade aspect" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image" />
CSS:
.aspect{
height: 300px; //However tall you want it to be
width: auto; //Don't specify the pixels
}
This will also work:
.aspect{
height: 300px; //However tall you want it to be
width: 100%; //Don't specify the pixels
}
<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="width:250px;" />
auto correct height to the width
`<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="height:300px;" />`
auto correct width to the height

Image Set Width Height Attributes in HTML, Set Width 100% in CSS

I have an image whose size I know.
<img class="example" src="img.jpg" width="1024" height="768" />
I want to have the width and height attributes set so it can layout where the image will be before it's downloaded. The image may take a second or two to come in, so when it does, I don't want the page to suddenly jump.
However, I also want the image to have width: 100%. Is there a way to achieve this using CSS?
I tried
.example {
width: 100%;
height: auto;
}
However, this ignores the aspect ratio I specified in the HTML. Is there a way I can use the width and height attributes defined in the HTML to keep the aspect ratio, but have the image to have width: 100% (i.e. the width of the parent)?
I don't want to use JS to achieve this, I don't want to hard code the proportions in CSS, and I'd rather not do any margin/padding hacks to achieve this.
Edit
Really, I'm just seeing if there's a better way of doing it than this,
https://jsfiddle.net/s6gkonbh/
[Update: updated link to fix broken external image url]
JSFiddle Demo
<div style="width:356px; height:452px; background-color:yellow">
<img class="example" src="https://live.staticflickr.com/1427/1370476027_aaf0621679.jpg" width="100%" />
</div>
just provide the width and height to the parent container division which will occupy the space of the image's dimensions while the image will load.
and set the width of the image to 100% and it will take height according to aspect ratio. Just set the background color of your parent div to white or something to blend with the background.
JSFiddle Demo
HTML:
<div style="width:500px; height:300px; background-color:yellow">
<img class="example" src="http://www.finnchat.com/app/uploads/2015/10/Blogi44_metakuva.jpg" width="100%" />
</div>
NB: image copyrights are with their respective owners.
Hi please try this remove the height and width from img tag
<img class="example" src="img.jpg" />
and css
.example {
width: 100% !important;
height: 100% !important;
}
The only way is by using javascript. Just set width 100% in css, then with javascript get the imatge width an multiply by the aspect ratio to get the desired height.

Variable/scaled width images: 5x20% greater than 100%?

I have come across a problem when optimizing a simple site for mobile/small viewport viewing. I have 5 images, displayed immediately next to each other and have set the width to 20% with no margin, padding or anything else. However, when the viewport is reduced to the point where the images should be scaled, the last always wraps to a new line. I have created a simple test and seen this behaviour in IE and Chrome:
<html>
<head>
<title>Image test</title>
</head>
<body>
<img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
<img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
<img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
<img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
<img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
</body>
</html>
As far as I understand, the images should never wrap since the total width of the images will never total more than 100% of the parent element.
Is this a known issue or am I missing something fundamental.
As we don't know what is the width of your container and of your images...
It may be related to the new image width calculated by the browser when scaling the image, specifically it could get "ceiled" thus exceeding the total width of the container.
e.g. img width 184px * 5 = 920px container width
after scaling down:
container width: 920px * 20% = 184px;
image width of 184px * 20% = 36.8 -> 37px
37 * 5 images = 185px exceeds the container width
try checking what is the width of your resized images, multiply it by 5 and see if it exceeds the container width.
My guess is you need a...
body {
padding:0;
margin:0;
}