CSS Images

Spread the love
Image - CSS Images
Image – CSS Images

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.

Contents

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

fig1-CSS Images-Code-
and <figure> and <figcaption> elements
fig1-CSS Images-Code-
and <figure> and <figcaption> elements
fig2 - CSS Images: Output - <figure> and <figcaption> elements
fig2 – CSS Images: Output -Code and <figure> and <figcaption> elements

The <figure> and <figcaption> elements used to caption images fig2.

fig3-CSS Images~Code background-image
fig3-CSS Images~Code background-image
fig4-CSS Images~Output background-Image
fig4-CSS Images~Output background-Image

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.

fig5-Code letterHead-Logo
fig5-Code letterHead-Logo

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.

fig6-Output letterHead-Logo
fig6-Output letterHead-Logo

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.

fig7-Code-TextWrap
fig7-Code-TextWrap

The IMG align=right or left has been used. Align can also be set to top, bottom, & middle.

fig8-Output-TextWrap
fig8-Output-TextWrap

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.

fig9-CSS Images~Code styleTextWrap
fig9-CSS Images~Code styleTextWrap
fig10-CSS Images~Output styleTextWrap
fig10-CSS Images~Output styleTextWrap

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.

fig11-Code Skew Images
fig11-Code Skew Images
fig12-Output Skew Images
fig12-Output Skew Images

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.

fig13-Code Scale Image
fig13-Code Scale Image
fig14-Output Scale Image
fig14-Output Scale Image

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.

fig15-Code Rotate Image
fig15-Code Rotate Image
fig16-Output Rotate Image
fig16-Output Rotate Image

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.

fig17-Google Resizer:View home page in desktop, tablet and mobile
fig17-Google Resizer:View home page in desktop, tablet and mobile

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
fig18-Phone portrait/ landscape size > 360 and 600 & tablet portrait/ landscape size > 720 and 1024
fig18-Phone portrait/ landscape size > 360 and 600 & tablet portrait/ landscape size > 720 and 1024

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.

fig19- Responsive Design Mode for Firefox
fig19- Responsive Design Mode for Firefox

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’.

fig20-Output src CODE
fig20-Output src CODE

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.