Adjust the image's placement and reduce its size as the screen size decreases, without using any media queries

Question

Adjust the image's placement and reduce its size as the screen size decreases, without using any media queries

Essentially, I encountered an issue where I had a table row with 2 cells - the left cell containing text and the right one containing an image. As the screen size decreased, I needed the image to move below the text. After some investigation, I delved into the workings of the display and flex properties to address this problem.

In the table row properties, I included

display: flex;
flex-wrap: wrap;

and for each cell, I added flex: 1 1 10ch;, as demonstrated on this resource, providing a clear explanation.

Now, my aim is for the image to shrink when it moves below the text as the screen size decreases. The fixed size of the image does not adjust proportionally with percentages or using max-width. Additionally, I attempted vertical alignment but noticed no change.

<div>
  <table style="width: 100%;">
    <tbody>
      <tr style="display: flex; flex-wrap: wrap;">
        <td style="text-align: left; vertical-align: middle; padding: 0 3% 0 0; flex: 3 1 50ch;">
          <p>Some random text. Typically, there's more content here.</p>
        </td>
        <td align="justify" style="padding: 0.5%; flex: 1 1 10ch;"><img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" width="500"  /></td>
      </tr>
    </tbody>
  </table>
</div>

I'm also struggling with the vertical alignment of the text. Is there a method to reposition it to the center?

html css flexbox display

Answer 1

Answer №1

To adjust the size of an image to fit its container, you can use the object-fit property:

img{
 object-fit: cover;
 width: 100%;
 height: 100%;
}

Answer 2

To adjust the size of an image to fit its container, you can use the object-fit property:

img{
 object-fit: cover;
 width: 100%;
 height: 100%;
}

Answer 3

Answer №2

Avoid using ch as units in this context, as it can lead to confusion and is not always compatible with variable width fonts. When working with images, the situation can be exacerbated. It's recommended to use em, rem, or even px. In this case, I opted for the latter.

The flexibility of Flex goes beyond what the example demonstrated. Check out the comments in the code snippet below for more insight.

.tbl {
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.first {
  text-align: left;
  vertical-align: middle;
  padding: 0 3% 0 0;
  flex: 3 1 auto; /* Adjusts size dynamically based on content */
}

.second {
  padding: 0.5%;
  flex: 0 1 500px; /* Fixed basis at 500px, only shrinks when necessary */
}

.second img {
  width: 100%; /* Image spans the full width of its container */
}

<div>
  <table class="tbl">
    <tbody>
      <tr class="row">
        <td class="first">
          <p>Some random text. Typically longer than shown here.</p>
        </td>
        <td align="justify" class="second"><img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" /></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 4

Avoid using ch as units in this context, as it can lead to confusion and is not always compatible with variable width fonts. When working with images, the situation can be exacerbated. It's recommended to use em, rem, or even px. In this case, I opted for the latter.

The flexibility of Flex goes beyond what the example demonstrated. Check out the comments in the code snippet below for more insight.

.tbl {
  width: 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.first {
  text-align: left;
  vertical-align: middle;
  padding: 0 3% 0 0;
  flex: 3 1 auto; /* Adjusts size dynamically based on content */
}

.second {
  padding: 0.5%;
  flex: 0 1 500px; /* Fixed basis at 500px, only shrinks when necessary */
}

.second img {
  width: 100%; /* Image spans the full width of its container */
}

<div>
  <table class="tbl">
    <tbody>
      <tr class="row">
        <td class="first">
          <p>Some random text. Typically longer than shown here.</p>
        </td>
        <td align="justify" class="second"><img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" /></td>
      </tr>
    </tbody>
  </table>
</div>

Adjust the image's placement and reduce its size as the screen size decreases, without using any media queries

Answer №1

Answer №2

Similar questions

Experiencing difficulties with JavaScript/jQuery when encountering the 'use strict' error

Juggling PHP scripts within javascript

Delaying UI interactivity until the document is fully loaded

Change the absolute positioning of a div element to be applied globally

Error with the jQuery scrolling plugin

Creating a Dynamic Clear Button for a Text Area in Angular

Utilizing the CSS Top and Left attributes along with Jquery animations

The page only appears properly after clearing the cache

The information I input into this form is failing to be stored in the WAMP database

Steps for developing a floating image transition using CSS and React

Is it possible to adjust the CSS code linked to the HTML tag based on the specific webpage being viewed?

Adjust the state based on the event in ReactJs

The implementation of subnavbars within a navigation bar using HTML and CSS

Explicitly employ undefined constants deliberately

Using PHP variables in JavaScript to access getElementById

Establish a seamless UDP connection using JavaScript and HTML5

Ensure that the link's color remains constant and remove any styling of text-decoration

Tips for determining the full width of a webpage, not solely the width of the window

Set the display property of all child elements within the DIV to none

Building a Table Using HTML and CSS