Use CSS Images to adjust borders, margins, and padding to highlight images and separating them from the neighboring text. Align images and have the text surround it. Move images, rotate, and insert them in non-rectangular frames. Add a background image and see the tile effect repeating horizontally and vertically. Add Responsive images that look great on a variety of screen sizes and devices. Solve problems associated with varying resolutions. Specify a set of images based on the pixel density of the display device. Find out how modern browser tools contribute to check how responsive designs work. Choose the ‘srcset’ and ‘size’ attributes. Browsers can then accurately select the correct image for devices. Also, use the attributes to make a responsive web design. The tools for making images and CSS must be supported with a constructive visual layout.
In web pages CSS for HTML defines both the building of a page and setting its style.
CSS Images: Essentials
The attribute align=right or left or center will apply to everything between the opening and closing <div> tag. This align attribute can also be applied with the <p> tag. The image code is enclosed with three <figcaption> tags. The <figcaption> tag is placed under or above the <img> tag and is displayed in the browser accordingly.
The figure & figcaption element
and <figure> and <figcaption> elements
The <figure> and <figcaption> elements used to caption images fig2.
When a background image is specified, it tiles the background repeating horizontally and vertically fig4 and fills the browser window body. background=images/design8.jpg- the background image will be copied until the whole of the screen is filled with pins.
CSS property for background tiling of images background-repeat take four values of ‘repeat’ fig4, ‘repeat-x’, ‘repeat-y’, and ‘no-repeat’ fig6. background-position takes nine values: top- left, center and right; center- left, center and right; and bottom- left, center and right.
Background Images
background-position: ‘left top’ is the CSS to position the logo image to the left & background-repeat with a value of ‘no-repeat’ fig6. Percentage or Pixel values used in the order of x-direction value first followed by the y-direction value separated with space.
The IMG align=right or left has been used. Align can also be set to top, bottom, & middle.
The text wrapped around the image is shown in fig8.
CSS Images: Text Wrap
The image element is an inline element. Images run just in with the neighbouring text.
Using the float CSS property left and right values it is possible to move images on the side of the window you specify. The browser reflows the text around it taking into account the CSS properties in the <style> tag. The float- left, margin-right, margin-bottom, and clear-right are applied to the image fig10.
CSS Images: Transform Property
The CSS transform property changes an element eg: <img> to skew, scale and rotate images along X-axis and Y-axis. However, all browser versions do not fully support the transform property.
The skew() property fig11 is used to skew elements eg <img> to displace each point of the image by a specified angle along X-axis and Y-axis. The skew(angle1, angle2) property accepts two angle values in deg along the X-axis and Y-axis. If only one value is there then the other value is zero.
The scale(sx) property transforms the element eg <img> fig14 by resizing the X-axis and Y-axis dimensions of the image with the same value-sx on both the axis. In Code fig13, we have used scale(1.5) to make the image scale 1.5 times along both the axis. The scale(sx,sy) property accepts a number eg (1,1.5). This means 1 used for X-axis makes the image remain at the original size. The other value 1.5 means the image scaled 1.5 times along the Y-axis.
The rotate(deg) property transforms the element eg by rotating the image about a fixed point in 2D ie X-axis and Y-axis at 90deg in fig16. In place of deg, other units of measures used are turns, grad & rad.
CSS Images: Responsive Images & Website
Responsive Images considers the devices’ dimensions and screen resolution with image dimensions. Use the style max-width to make images fill the devices’ layout. Use srcset for optimizing screen resolutions, srcset plus sizes to optimize for device width and the <picture> element manually control the manner in which the image file is displayed.
In Google Resizer enter any website URL. Take a view across material design breakpoints for desktop, tablet, and mobile. Check the responsiveness of your website by clicking on Desktop fig17. Scroll up/ down in the view window for desktop or mobile. View your site for different window sizes –
- Window xsmall> 480
- Window small> 600
- Window medium> 840, 960
- Window large> 1280
- Window xlarge> 1440, 1600
Similarly, check for your website responsiveness for tablet and mobile screen by clicking on the different sizes as shown in fig18.
Pixel Density
Pixel Density = diagonal pixel resolution of display / diagonal size of the display.
-We assume all displays are made up of pixels with RGB subpixels. The resolution referred to as x by y where x-no of pixels in the horizontal direction and y-no. of pixels in the vertical direction.
-A full HD display eg measures PPI as the no.of pixels on the display 1920×1080/ size of the display area.
Pixel Density or PPI – pixels per inch = xy(total no.of pixels on the display) / horizontal size * vertical size of the display (the total area in square inches).
Resolution
Image Resolution refers to the width and height of the image along with the total number of pixels. Display Resolution or Screen Resolution is the number of pixels in both x(width), y(height) directions. Retina display is any display with a high pixel density (around 250 PPI). The retina of the human eye cannot notice individual pixels from a distance of say 2’. The display looks just excellent from this close range. iPhone resolution of 960*540 on a 3.5’’ screen held at a distance of say 24’’ from the eye has a pixel density of 326.
Resize
Resizing refers to changing the number of pixels in an image. Resize Image by scaling, cropping, and padding. Scaling means to apply a scale factor to the image. Crop an image by cutting pixels. Padding an image means to add dummy pixels. Image editing software reduces or increases the number of pixels. The software calculates the vertical pixel when the horizontal pixel changes and the image does not change its shape. Techniques such as lossy or lossless compression reduce the file size. Read more by clicking optimize-images-for-web.
Browser Setting
Open Menu in your Firefox browser by clicking on the top end button. From the dropdown display page, go to the bottom and click on the Web Developer tab. In the Web Developer display page, select the Web Console tab. Click (…) more tab and select Setting. In the ‘Available-Toolbox-Buttons’ checkmark the Responsive Design Mode fig17.
CSS Images: srcset
Responsive images are a way to provide the browser with a source of multiple images.
<img src=/wp-content/uploads/2019/11/Penguins.jpg; srcset=/wp-content/uploads/2019/11/Penguins-1x.jpg 1x, /wp-content/uploads/2019/11/Penguins-2x.jpg 2x, /wp-content/uploads/2019/11/Penguins-3x.jpg 3x;>
In the above code the ‘srcset’ attribute describes an arrangement of images in three different sizes – 1x, 2x, 3x, etc. The regular src attribute is for browsers that do not support ‘srcset’.
The default images are Penguins.jpg and the width for the three sizes is 3x=1080w, 2x=540w & 1x=270w. The browser then makes the decision fig18.