When I have an image from 950x500 and output it like so:
<img src="http://full/url/to/image.png" />
There is a weird 3px in height space below the image. When asking javascript about it, it will indeed say the size is 950x503. While the image is really (check multiple times) 500 in size. It appears that the image tag does this how can this be fixed?
Note that the image must also remain to function dynamic. So if I were to set width of the image to 100% the height will resize accordingly.
Try this instead of putting display :block; beacuse this gonaa effect all the image tag though there is no harm, but the right way is this :
<img src="http://full/url/to/image.png" height="950" width="500"/>
Never mind, the answer is, set your image display on block like so:
img { display: block; }
Related
I have tried to add the image in the page, but end up the image is too big for the viewport.
enter link description here
I tried some way that has been posted put none of them working. Is there anyway to do this without resizing the image by using fixed width/height
try to use
width : 100%
Here some update on your codepen
https://codepen.io/anon/pen/vjMWYo
try using max-width:100% on image. Something like this:
img {
max-width: 100%;
}
<img src="http://via.placeholder.com/1700x400" />
I'm trying to make a profile picture thumbnail where the image is different for each user. I want to define the dimensions in which the image must conform to. Since the image is going to be different for each user, how would I go about writing the HTML without knowing what the file name of the image is going to be?
Option A: just don't define the size; <img> will be automatically sized and the document reflowed when the image loads. Not pretty, but best you can do if you really have no idea what the sizes will be.
Option B: enter either the height or the width; let the browser scale the other dimension upon load. This is nice if you can fit a fixed height or width in your layout.
Option C: use CSS to specify max width and max height. The image will be scaled to be inside that rectangle. This is nice.
Option D: specify the height and width in CSS. If you have images of different size, they will be stretched, which will look awful.
Option E: same as D, but crop and/or resize the thumbnails so that you know the size in advance. Best option if you can do it.
Use CSS.
Give the image a class and write a CSS declaration like this:
<img class="profilepic" src="path/to/image" />
.profilepic {
width:100px;
height:100px;
}
You can also just put the styles inline if you wish.
<img style="width:100px;height:100px;" src="path/to/image" />
What is the best way to get a smaller version of an image I want to use onto a webpage, but still allow the person to view the full image if they click "view image"? This question could really be broken down into two parts:
Say my image is 900x900px: Is there a way I can display that image at a much smaller size, like 100x100px (so that the browser does not have to load the entire 900px image) but allow the person to see full size image if they click "view image"?
Additionally, what is the best way to take the 900px image, and display it at only 100px? Assuming I can't do this ahead of time with photo editing software, should I use the height and width tags in HTML or in CSS? (It seems like they both resize the image (scale) rather than crop). Thanks
With the usual approach to use the heightand width attributes, the whole image still has to be transferred to the browser.
So if you add a link somewhere (the image itself could be the link), the user is still able to access the complete (900 x 900 px) image.
Regarding image cropping: There is some trickery you can use as outlined in this SO answer.
JsFiddle Demo 1 (the image itself is used as a link to the original full-sized image)
JsFiddle Demo 2 (using the first demo as a base, but this time cropped the image)
Easiest way is to use it as a background to a div and then use the background-sizeattribute. An example would be what I did with my website.
<div id="image"
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg);
background-position:20% 20%;
background-size:600px 800px;">
</div>
Using this method, I was able to take a 3200x2400 photo and scale it down to 800x600 photo. Plus, In my opinion, it's a lot easier to style a div with a background photo than just a plain image and I feel it just does more. Just so you know, background-position changes what part of the scaled in photo you show :)
<div id="image"
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg);
background-size:100% 100%;">
</div>
Also, you could change the background size to 100% by 100% and that way the background will display the full image all the time and will automatically scale down as your window size changes or screen size :). Best for fluid layouts.
well you can set the image as a background of a div and then set the background-size property
#yourDiv{
width:100 px;
height:100 px;
background:url('path/to/your/image');
background-size: 100px 100px;
}
you could set different properties for :hover but you'd need to use javascript to change the properties onclick
You can use a lightbox or with just CSS, but it will resize the page. Now this is a very simple example so don't expect a beautiful display.
HTML
<img src="img.png" class="resize">
CSS
.resize {
width:100px;
height:100px;
}
.resize:hover {
height:900px;
width:900px;
}
Now personally I would use a javascript or just a lightbox. It will look much better right out of the box with minimal adjustments. Just my 2 cents.
Currently pictures are being placed into my website within a div container with a given width and height.
Some pictures are landscape, others are portrait.
Currently I give the images a static width and height using CSS to position it correctly inside it's container.
.winner .winner-image img {
height: 159px;
width: 143px;
}
However more often than note this distorts the picture.
What's the recommended way to display images without distorting them? Best practices?
Without some server side code to actually determine the height and width of the image, the best idea would be to set EITHER the height OR the width, but not both. This will cause the image to be resized proportionally. Which dimension you choose to constrain would depend on your site layout.
To not distort them, the images must be given their native height and width (or a proportional value). Just assign one of the values, and most modern browsers will scale the image proportionally for you.
You can add an external element (span or div) with a fixed size, and have that element not display overflowed content.
To guarantee that your images are re-dimensioned, you can also set a height OR width value for images, matching the wrapping div value (only one value must be assigned, so that images are not distorted.
<style>
.img-wrapper {display:inline-block; height:159px; overflow:hidden; width:153px;}
.img-wrapper img {height:159px;}
</style>
<div class="img-wrapper">
<img src="">
</div>
The best way is to create thumbnail of your image once uploaded to a server. Thumbnail should be 159x143 px, but if you need to show images now you can set for div fixed width with css property "overflow: hidden;" and just set height of your image. do not touch width
If it's important that all images show in the same size, and you don't want to distort them, you have to crop them for the best result. Otherwise, you could wrap the image in a div, set the height and width of the div and hide the overflow, or use the image as the background for the div.
If height and width may be different across images, then go with the solutions already mentioned, i.e. setting either height or width.
Is it good practice to set the dimensions of an image (in static content), even if I have cropped the image to the correct size and it's container has fixed dimensions and overflow:hidden ?
<img src="" title ="" alt="" width="100" height="100"/>
Generally you should provide the height and width tags, so that the browser can reserve the needes space for the image. Else, the layout may change during the loading of the page.
As you have a fixed size container and overflow: hidden, it probably won't help much though. But even if it doesn't help, it does no harm either. So you should stick with always adding height and width attributes.
http://www.w3schools.com/tags/att_img_width.asp (See the tips under "Definition and Usage")
I don't have hard data to back it up, but I think I have seen browsers that showed a rectangle in the image's place until the actual image was loaded. To show that rectangular area correctly, browser would need width and height data.
Also, some browsers will show a rectangle instead of the image when images are turned off or can't be loaded. For correct sizing of the rectangle, dimension info is also needed.
I think it won't do any harm to set it.