I'm dealing with img tags which are have a fixed width & height.
The question is that a have a set of images that each one has its own dimensions, so in the resulting view, some of them vary in height keeping the width constant.
This is what I get:
... and this is what I want to accomplish:
Is there any way that whatever image is loaded in the img tag keep proportions and be all with the same height?
you can use css and set the property of width and height to what ever you want
img
{
width : 150px;
height : 150px;
}
<img src="https://static.pexels.com/photos/57825/pexels-photo-57825.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/149941/pexels-photo-149941.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/163145/laptop-computer-coffee-yellow-163145.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/7107/notebook-hero-workspace-minimal.jpg" alt="no image available" />
Please try the following:
1. Put the images into 'div's
Eg.
<div class='image-container'>
<img src="yourimage.jpg">
</div>
adjust the height of the in the stylesheet:
.image-container img{
width:100%;
height:100%;
}
adjust the width of the 'div's to fill quarter of the page:
.image-container{
width: 25%;
}
Related
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" />
I have an image:
<img src="#" width="42" >
If I set only the width, Firefox and IE will scale also the height, but Chrome doesn't it keep the initial image height. Can Chrome behavior be fixed ?
If I set just the height is not taken in consideration. Can an image be scaled by height ?
Setting height to auto should work. For example:
<img src="#" width="42" height="auto">
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.
This will work for all modern browsers and works for both % and px, em sizes ect.
See W3schools
Or using inline styles:
<img src="#" style="width:42; height:auto;">
Edit: I'm not sure you did not mean give height a value and make width resize automatically. In which case width: auto should do fine.
Instead of letting HTML do the work, let CSS do it.
Change :
<img src="#" width="42" >
To :
<img src="#" style="width: 42px; height: auto;">
That will allow CSS to resize the image.
.img
{
width:auto;
height:auto;
}
You can define width and height in css
<img class="holder-image" src="" ng-click="onAvatarClick()">
like this, when the src not exists, I want to hold the size with a border or other images, what should I do ?
I fetch src of images from Internet, but some src doesnt work, it would show a small err image, I dont care what image is , I just want to keep the size designed.
Use the following tag:
<img src="yourimageifany" id="imageid" />
Set CSS as follows:
img{
width: 100%;
border: 1px solid #000;
border-radius: 5px;
}
You can get the image width as follows (using JQuery on load):
$(window).load(function() {
var width= $("#imageid").width(); //get width
$('#imageid').height(width); //set height as width
});
You can use the following line:
<img class="holder-image" src="" ng-click="onAvatarClick()" height="200px" width="200px" />
This will set the height & width of your image as 200px
When I try to assign a height to my <div> that contains an <img>, it’s not modified, just moved.
.banner #dornierenvoj {
left:-95px;
bottom:-90px;
height:-100px;!important
position: absolute;
}
<div id="mapplane">
<img src="templates/protostar/images/planeminiature.png" />
<div id="dornierenvoj">
<img src="templates/protostar/images/dornierenvoj.png" />
</div>
</div>
First there is no negative height or width in css !
Second U can use this code to give that image height :
.banner #dornierenvoj img {
height:100px;
}
That's because the css points to the div, not the image.
you have 2 options:
1: add a class to the image
.bannerImage {height:30px;}
<img class="bannerImage" src="pic.png">
define it in the css
#dornierenvoj img {height:30px}
<div id="dornierenvoj"><img src="pic.png"></div>
the code inside the {} will work on all images inside the div dornierenvoj.
use this :
<img src=""templates/protostar/images/planeminiature.png" width="400" height="400">
THIS IS AN EXAMPLE of width and height
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;
}