Author: John Au-Yeung

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 enable click-through div to underlying elements with CSS

In this artricle, we’ll look at how to enable click-through div to underlying elements with CSS.

How to enable click-through div to underlying elements with CSS?

To enable click-through div to underlying elements with CSS, we disable clicks on the element.

For instance, we write

div {
  pointer-events: none;
  background: url("your_transparent.png");
}

to disable clicks on the div to enable click-through on its underlying elements.

Conclusion

To enable click-through div to underlying elements with CSS, we disable clicks on the element.

Sometimes, we want to align checkboxes and their labels consistently cross-browsers with CSS.

In this article, we’ll look at how to align checkboxes and their labels consistently cross-browsers with CSS.

How to align checkboxes and their labels consistently cross-browsers with CSS?

To align checkboxes and their labels consistently cross-browsers with CSS, we add vertical-align property.

For instance, we write

input {
  vertical-align: -2px;
}

to adjust the vertical position of the input with vertical-align: -2px;.

Conclusion

To align checkboxes and their labels consistently cross-browsers with CSS, we add vertical-align property.

Sometimes, we want to add transitions on the CSS display property.

In this article, we’ll look at how to add transitions on the CSS display property.

How to add transitions on the CSS display property?

To add transitions on the CSS display property, we set the transition property.

For instance, we write

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

to add a div with a ul element.

Then we write

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

to add the transition property toi transition the visibility property from hidden to visible and vice versa when hover and move our mouse away from the ul respectively.

Conclusion

To add transitions on the CSS display property, we set the transition property.