5
$\begingroup$

When one attaches an image to the body of a post, like so—

enter image description here

—it automatically takes up the entire width of the body of the text.

Is there any way that this can be manually altered? For example, perhaps I would like to make the image extend through only 75% of the post’s width and centre it.

$\endgroup$
1

2 Answers 2

Reset to default
12
$\begingroup$

I'm the wrong person to tell the whole story, but I know that you can resize images by using an appropriate HTML img attribute.

Below I reuse an animation that is a small part of an answer of mine from main.

First 200 pixels wide <img src="https://i.sstatic.net/dIISR.gif" width="200">

Then resized <img src="https://i.sstatic.net/dIISR.gif" width="300">

You can specify width or height. Feel free to experiment!

According to that page it should be possible to add horizontal space around the image by specifying the attribute hspace, but that feature is not supported in HTML5. We need a more internet-savvy person to interpret the meaning of that. Anyway, I could not make it work here.

Also, I'm afraid I don't know how to make the size relative to the page width. Quote: In HTML 4.01, the width could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels. It feels strange to me that a feature is dropped from a later version of the language, but I suspect this sentiment tells more about me than about the development of HTML.

See here for a list of HTML tags allowed/supported in StackExchange. Scroll a bit further down to see which img attributes are supported. Note that neither style nor hspace is supported.

$\endgroup$
2
3
$\begingroup$

@Jyrki Lahtonen has specified one way to do so which is most widely used. I would like to add a more information :

  • When using an <img> tag, any attributes must be specified in the following order else it will strip the tag and the image will not be displayed: src, width, height, alt, title. The values for the width and height attributes can be up to 999.

Add a character to the file name to specify a size

If the images are hosted on the Stack Exchange imgur.com account (which most are), you can add single character suffix to the filename in the URL after the image id and before the extension to get resized versions.There are 6 total thumbnails that an image can be resized to. The thumbnails are here.

For example, you can use

https://i.sstatic.net/a9LCgl.jpg

instead of

https://i.sstatic.net/a9LCg.jpg

to get a more manageable size screenshot.

But I've personally observed that decreasing the size of image by this method decreases the resolution of the image,too. So, if needed, you can always link to the full-size screenshot too; transform:

[![enter image description here][1]][1]

[1]: https://i.sstatic.net/a9LCg.jpg

to

[![enter image description here][1]][2]

[1]: https://i.sstatic.net/a9LCgl.jpg 
[2]: https://i.sstatic.net/a9LCg.jpg

and it'll link the reduced-size version to the full-size (original) image.

The square options will scale the image (up as well as down) and crop to fit the size, thumbnails are only ever scaled down (smaller images are not scaled up) to fit with the square maximum dimensions.

NOTE: Resizing only the preserves the first frame of an animated GIF image. If you need to resize an animation, use HTML markup instead (i.e. use <img>).

WARNING: Imgur seems to have consistency issues with generating the different sizes of images, where not all suffixes give you a resized image; and are instead served the original image. I don't know what causes this to happen or what a work-around might be.

Add a ?s=X query string to the URL for some square sizes

You can add a query string to the URL to specify some specific sizes. The available sizes are dimensions that are the powers of two from 16 up to 512 (i.e. X can be 16, 32, 64, 128, 256 and 512).

Using this method will produce a square image. The image may be cropped and/or resized without preserving the image's aspect ratio.

Example (with link to full sized image):

[![enter image description here][1]][2]

[1]: https://i.sstatic.net/a9LCg.jpg?s=256
[2]: https://i.sstatic.net/a9LCg.jpg

There were discussions on the same topic on Meta SE and Meta SO.

$\endgroup$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .