Category: CSS

Sometimes, we want to auto-resize an image to fit a div container with CSS

In this article, we’ll look at how to auto-resize an image to fit a div container with CSS.

How to auto-resize an image to fit a div container with CSS?

To auto-resize an image to fit a div container with CSS, we set the max-width and max-height properties.

For instance, we write

img {
  max-width: 100%;
  max-height: 100%;
}

to set the max-width and max-height to fill the whole container’s dimension if it doesn’t change the aspect ratio .

Conclusion

To auto-resize an image to fit a div container with CSS, we set the max-width and max-height properties.

Sometimes, we want to vertically align text next to an image with CSS.

In this article, we’ll look at how to vertically align text next to an image with CSS.

How to vertically align text next to an image with CSS?

To vertically align text next to an image with CSS, we use flexbox.

For instance, we write

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

to add an img and a span in a div.

Then we write

div {
  display: flex;
  align-items: center;
}

to make the div a flex container with display: flex;.

And we center the items in the div vertically with align-items: center;.

Conclusion

To vertically align text next to an image with CSS, we use flexbox.

Sometimes, we want to change the cursor into a hand when a user hovers over a list item with CSS.

In this article, we’ll look at how to change the cursor into a hand when a user hovers over a list item with CSS.

How to change the cursor into a hand when a user hovers over a list item with CSS?

To change the cursor into a hand when a user hovers over a list item with CSS, we set the cursor property.

For instance, we write

li {
  cursor: pointer;
}

to add the cursor: pointer style to make the cursor turn into a hand when we hover over li elements.

Conclusion

To change the cursor into a hand when a user hovers over a list item with CSS, we set the cursor property.

Sometimes, we want to make a div not larger than its contents with CSS.

In this article, we’ll look at how to make a div not larger than its contents with CSS.

How to make a div not larger than its contents with CSS?

To make a div not larger than its contents with CSS, we make it display as an inline-block element.

For instance, we write

<div>
  <div class="yourdiv">content</div>
</div>

to add nested divs.

Then we write

.yourdiv {
  display: inline;
}

to make the inner div an inline-block element with display: inline;.

Conclusion

To make a div not larger than its contents with CSS, we make it display as an inline-block element.

Sometimes, we want to give text or an image a transparent background using CSS

In this article, we’ll look at how to give text or an image a transparent background using CSS.

How to give text or an image a transparent background using CSS?

To give text or an image a transparent background using CSS, we set the background-color property.

For instance, we write

<p style="background-color: rgba(255, 0, 0, 0.5)">
  <span>Hello, World!</span>
</p>

to set the background-color to a rgba value.

The last value is the opacity.

Conclusion

To give text or an image a transparent background using CSS, we set the background-color property.