Css coding image size

HTML Images

Images can improve the design and the appearance of a web page.

Example

Example

Example

HTML Images Syntax

The HTML tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.

The tag is empty, it contains attributes only, and does not have a closing tag.

The tag has two required attributes:

Syntax

The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.

Example

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example

If a browser cannot find an image, it will display the value of the alt attribute:

Example

Tip: A screen reader is a software program that reads the HTML code, and allows the user to «listen» to the content. Screen readers are useful for people who are visually impaired or learning disabled.

Image Size — Width and Height

You can use the style attribute to specify the width and height of an image.

Example

Alternatively, you can use the width and height attributes:

Example

The width and height attributes always define the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.

Width and Height, or Style?

The width , height , and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

Example

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

Example

Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

Example

Notes on external images: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be removed or changed.

Animated Images

HTML allows animated GIFs:

Example

Image as a Link

To use an image as a link, put the tag inside the tag:

Example

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example

The image will float to the right of the text.

The image will float to the left of the text.

Tip: To learn more about CSS Float, read our CSS Float Tutorial.

Common Image Formats

Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

Abbreviation	File Format	File Extension
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

Chapter Summary

• Use the HTML element to define an image
• Use the HTML src attribute to define the URL of the image
• Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
• Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
• Use the CSS float property to let the image float to the left or to the right

Note: Loading large images takes time, and can slow down your web page. Use images carefully.

HTML Exercises

HTML Image Tags

Tag	Description
	Defines an image
	Defines an image map
	Defines a clickable area inside an image map
	Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

How to resize an image in CSS?

You can use the width , max-width , min-width , height , max-height & min-height properties to change the image size. See the examples below.

This is how you can resize the images. You can also add auto height & width but this is optional. For example:

After you specify the width , the height will be automatically resized proportionally. In the same vein, if you specify height , the width will proportionally change.

You can also use multiple width & height properties together. Please see some of the examples below.

The above CSS will make the image 800 pixels if there is available space. But if the available space is lower than 800 pixels, then then max-width: 100% will make the image adapt available space. Actually, you should specify max-width: 100% globally for all the images on your website. This way the images become responsive.

If the actual image size is lower than 200 pixels (width), the above CSS will make it 200 pixels always & on all screens. But if the actual image is bigger than 400 pixels (width), the above CSS will make the image 400 pixels and it will never exceed this 400 pixels.

The above CSS will force the image to occupy full height based on its actual size ( min-height: 100% ) but it will never exceed 400 pixels ( max-height: 400px ).

The above CSS will make the image 250 pixels (height) always.

Can you calculate the size?

The above CSS will make the image 350 pixels (height) always.

If you specify the same property multiple times, the last one will win. See the example below.

Based on the above CSS, the image will be 400 pixels.

The best approach to image sizing in CSS

Whenever you work on any projects, your first step should be to include a max-width of 100% for all images. You can think of this as a global rule for tag. In your every web design project, add the following CSS:

This will make your images responsive. Otherwise, some of the images may exceed the viewport width.

However, it does not mean that you are not allowed to change the size later. If you need to change the size of one or more images, you can do that later.

If you want a specific image to be 600 pixels in width, you can target the image based on its CSS class or ID. For example:

This is the best way to specify image sizes.

Some real-world use cases & examples for resizing images

I explained 5 real-world cases about resizing images using CSS. Also, you’ll find a couple of examples and code samples for all the steps.

Resizing images to adapt to any screen sizes

Only with this one line of CSS, all your images will become responsive and adapt to any kind of device size. Try resizing the browser or the above image (drag the bottom-right corner of this image).

Resizing images on a certain scale (proportionally)

This 80% width is relative to the container div.

Proportionally resize the image based on width and height

The above example resizes the image based on 80% width and the height comes automatically. But if you want to resize an image based on both width and height on a predefined scale, you have to assign the object-fit property.

You can use this object-fit property to prevent your image from squishing or stretching, especially when assigning both width and height.

The default value is “fill.” There are other values that you can explore and see what works best for your project: contain, scale-down, none, and cover (applied in the above example). Learn more about it on the MDN website.

Resize the image in specific width and height

Example: 1

Example: 2

If you take a closer look at the above two images, the first image has become stretched. Because the width: 400px and height: 300px do not match the actual proportion of the image.

But in the second example, the image received its proportional height value. And it looks better than the first example.

Difference between width and max-width in CSS

width and max-width create the same space for absolute lengths. For example- pixel, inch, centimeter, point, etc. These images below have width values 384px & 4in respectively. So these two have the same width because 384px = 4in.

But these two properties (width & max-width) do not express all length units equally. For example- rem, em, percentage, or any other relative lengths.

However, if you assign a 400px width for an image, it will always be 400 pixels, no matter if the screen is larger or smaller than 400px (until there is a max-width: 100% globally).

On the other hand, if you assign 400px as the max-width, it will never exceed this limit and at the same time, the image will not shrink in smaller screen sizes that are less than 400px.

And that is a misconception among many developers. But if it’s you, try the below CSS and you’ll see that the images are exceeding the viewport or screen.

img /* try this CSS just to break your incorrect opinion about max-width */

Do you want to know about resizing background images? See this post as a reference.

Learn more about images

• How to resize an image in CSS?
• How to add images to an HTML table?
• How to create an image hover animation effect only with CSS?
• How to position text over an image with CSS?
• How to change an image on hover (CSS)
• Center an image in various directions & methods
• How to insert an image in HTML?
• How to right-align an image in HTML CSS?
• How to add image border in CSS [styles & examples included)
• How to create a hero banner image using HTML CSS?
• How to wrap text around an image in HTML?
• How to rotate text & images using CSS?

Build HTML CSS projects

Popular posts

About Shihab

With over 20K monthly readers, my goal is to help small businesses to create a stunning online presence.

At the same time, I’ve been creating resources for web developers, designers & freelancers in general.

Categories

Recent comments

Yes, you can edit the code to make them center aligned. You can contact me on Skype to get customized/extra…

Hi, thank you for this. It almost helped me to achieve what I wanted. Only one problem left: I want…

Thank you, that was so helpful! Especially the ‘Extra help for non-techies and newbies’ part 🙂

You have crafted an amazing guide about the best Fiverr gig image size guide. I found it helpful while doing…

Wow great it worked like a charm. Thanks buddy

Disclosure: I accept suggestions to make improvements to any content & user experience. So if you have any, please feel free to reach out. You will find a few different contact methods on the contact page. But, I may not respond to those persons who intend to get links.

Shihab Ul Haque

You can call me Shihab. I am a web developer and have been working with PHP & WordPress a lot.
I have a master’s degree and left my regular job to fully engage with the field that I love working in. I live in Bangladesh and help business owners to create a stunning online presence.

Источник