The size of the pictures on the web page seems to be the same. In the most common article pages with multiple pictures, the size of the picture is usually the same as the width of the page. In this way, the page looks like a straight cylindrical shape. If you see too much of this layout, you will feel very monotonous. I think this situation is largely due to the limitations of old-fashioned browsers. However, with the popularity of modern browsers (Firefox/Google/IE11), browsers have fewer and fewer restrictions on page design, and the imagination of web programmers can be greatly exerted.
For example, Leng Zhi: Do you know how the [x] that every window has come from? In this article, many pictures exceed the limit of text width, giving people a feeling of staggering and staggering. At the same time, large pictures are displayed in their real size, giving people a more shocking feeling.
But technically, we can easily limit the images with the maximum width of the text, so that they all maintain a width, and when we don't follow the width of the text, we need the size of each image. We can declare the original size of the image when editing on the server. A more flexible way is to dynamically obtain the original size of the image by placing a piece of js on the page and dynamically change the display size of the image. This is compatible with the old text maximum width, and can also make the picture appear its original size when needed.
How to get the original size of the image on the browser side using JavaScript?
The code copy is as follows:
var img = $("#img_id"); // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width; // Note: $(this).width() will not
pic_real_height = this.height; // work for in memory images.
});
Webkit browser (Google Chrome, etc.) can only obtain height and width values after the loaded event of the image. So, you can't use the timeout function to wait delayed, the best way is to use the onload event of the image.
In order to avoid the impact of CSS on the size of the image, the above code copies the image to memory for calculation.
If your page is an old-fashioned page, you can embed this code at the bottom of the page as needed, and it does not require you to modify the original page.