Adjust the size of text overlaying an image using CSS, and modify it further

Question

Adjust the size of text overlaying an image using CSS, and modify it further

I am working on updating a sensor value every few seconds and displaying the type of sensor using an image. Here is an example of my code structure:

<div class="sensor">
    <img src="images/ssensor.png" 
         class="img-fluid img-max">
    <div class="sensortext">
        sensorvalue
    </div>
</div>

using the following CSS:

.sensor {
  position: relative;
  width: 100%;
}

.sensortext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -80%);
}

While this setup works well, I encounter issues when resizing the window - the images change size but the text remains static. How can I ensure that they scale proportionally?

html css

Answer 1

Answer №1

If you're looking for a solution, consider using the `vmin` unit as recommended by Rene in the feedback. Another approach could be to incorporate it with a `clamp` function, which allows you to define minimum, optimal, and maximum values. Experimenting with these parameters can help you determine the best fit for your needs!

Additionally, when it comes to simple overlays, opting for a grid layout instead of absolute positioning might be more beneficial. This eliminates the need to deal with stacking contexts.

.container {
  display: grid;
  place-items: center;
}

.container * {
  grid-area: 1 / 1;
}

.container-text {
  color: white;
  font-size: clamp(3rem, 10vmin, 6rem);
}

<div class="container">
  <img src="https://loremflickr.com/640/360" alt="placeholder">
  <div class="container-text">
    Overlay text
  </div>
</div>

Answer 2

If you're looking for a solution, consider using the `vmin` unit as recommended by Rene in the feedback. Another approach could be to incorporate it with a `clamp` function, which allows you to define minimum, optimal, and maximum values. Experimenting with these parameters can help you determine the best fit for your needs!

Additionally, when it comes to simple overlays, opting for a grid layout instead of absolute positioning might be more beneficial. This eliminates the need to deal with stacking contexts.

.container {
  display: grid;
  place-items: center;
}

.container * {
  grid-area: 1 / 1;
}

.container-text {
  color: white;
  font-size: clamp(3rem, 10vmin, 6rem);
}

<div class="container">
  <img src="https://loremflickr.com/640/360" alt="placeholder">
  <div class="container-text">
    Overlay text
  </div>
</div>

Answer 3

Answer №2

Here is a suggestion for CSS implementation:

.sensor {
position: relative;
width: 100%;
}

.sensortext {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.img-max {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
transform: translate(-50%, -50%) scale(1);
}

An issue arises when the text remains in a fixed position while the image is resized. To address this, you can also apply the CSS "transform" property to the image element. By using the values of "translate" for X and Y axis displacement and "scale" for resizing the image, the text will dynamically center itself in relation to the image.

Answer 4

Here is a suggestion for CSS implementation:

.sensor {
position: relative;
width: 100%;
}

.sensortext {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.img-max {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
transform: translate(-50%, -50%) scale(1);
}

An issue arises when the text remains in a fixed position while the image is resized. To address this, you can also apply the CSS "transform" property to the image element. By using the values of "translate" for X and Y axis displacement and "scale" for resizing the image, the text will dynamically center itself in relation to the image.

Adjust the size of text overlaying an image using CSS, and modify it further

Answer №1

Answer №2

Similar questions

Struggling to effectively use XPath to target LI elements that contain specific text

Insert a picture within the text input field

Trouble outputting ng-repeat with JSON data

Center content within a div using the middle alignment

Will my HTML5 canvas effects be compatible with iPhone and Android devices?

The innerHTML of the p tag remains unaffected when using document.getElementsById("")

Bottom section of a multi-level website with horizontal dividers

Database entries displayed using a CSS grid

Removing the nested UL element while preserving the child elements

Utilizing JavaScript to dynamically resize an element within a slide as soon as the slider transitions to the following slide

Breaking HTML text at the end of an Android TextView line

Expanding an HTML table with a click: A step-by-step guide

What's the best way to ensure a paragraph element larger than its container is centered using bootstrap?

What is the best method for choosing the next item with jQuery?

Getting tags with text containing specific substring by utilizing CSS selectors

Exploring the integration of Polymer elements within a .Jade document

Do we really need to include the viewport tag in order to make a website responsive to various devices?

Tips for dynamically incorporating input forms within AngularJS

The feature to swap out the thumb of a range slider with an image is currently not

Is it possible to use Selenium in Ruby to locate an element based on two properties simultaneously?