Center Image and Text at Large Width, Allow Both to Shrink at Small Width

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

How can I make my image and a div with text to always be responsive and the same size?

Responsive Font-size

Set the default font-size for the page by setting it on the root element (html or :root). Any lengths set in rems will be relative to the font-size (from now on it will be referred to as fs) of root. If the fs of root is 16px (browser default) then a length of 2rem is 32px.

In the example, the fs of root is a relative length: 5vmin. vmin/vmax is relative to either the viewport's width or height. If it is vmin, then lengths are relative to the smaller length of the current viewport dimensions -- if it is in vmax, then lengths are relative to the larger length of the current viewport.

Ex. a viewport width of 800px and height of 450px -- 5vmin means 1rem is 5% of 450px and 5vmax means 1rem is 5% of 800px. Since lengths are relative to viewport, if the browser window changes at anytime, all lengths set in rem recalculates and adjusts accordingly. So if all of the lengths are in rem, you'd have a fully responsive page, but it's not perfect. There will be a point when the ratio of lengths will change when the viewport ratio is flipped from landscape to portrait or if one of the viewport dimensions becomes disappropriately smaller or bigger. That situation is beyond the scope of the question so I'll give you a hint: one solution is media queries.

Responsive Elements

Set width and height in percentages.

The parent element that contains both text and image elements should be a flex container and have no padding and margins and hide any vertical overflow (see Figure I).

Figure I - Parent Element (aka article.adoption)

  .adoption {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
  }

Next, the right-side element that has the text should be an flex container with a vertical stacking flow. Set it's height to 100% and it's width to 50%. (see Figure II)

Figure II - Text Element (aka section.info)

  .info {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    width: 50%;
    height: 100%;
  }

Then on the left-side element that has the <img>, set it's height to 100%, width to 50%, remove padding, and hide any vertical overflow. (see Figure III)

Figure III - Image Element (aka figure.image)

  .image {
    width: 50%;
    height: 100%;
    padding: 0;
    overflow-y: hidden;
  }

For the <img>, I cropped it so that it's a square using a program: paint.NET. Then set <img> width to 100%. If there's a small gap at the bottom, add the following ruleset to figure.image: margin: 0 0 -0.5rem 0. That'll drag the image down and past the bottom border where it'll be hidden by overflow-y: hidden.

View this example in full page mode, dimensions are distorted if viewed in an <iframe>

^{Note there's an red dashed outline that shows that the two elements are flush -- this is for demonstration purposes and recommended that you remove the ruleset: outline: 1px dashed red from .adoption}

html {
  font: 300 5vmin/1.2 'Segoe UI'
}

.adoption {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  color: whitesmoke;
  background: #363635;
  overflow-y: hidden;
  outline: 1px dashed red;
}

.info {
  background-color: #363635;
  display: inline-flex;
  flex-flow: column nowrap;
  justify-content: center;
  gap: 0.5rem;
  width: 50%;
  height: 100%;
  padding: 1.75rem;
}

.title {
  margin: 0;
  font-size: 1.25rem;
}

.link {
  color: whitesmoke;
  text-decoration: none;
}

.image {
  width: 50%;
  height: 100%;
  margin: 0 0 -0.5rem 0;
  padding: 0;
  overflow-y: hidden;
}

.image img {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">

<article class="adoption">
  <section class="info">
    <h2 class="title">Explore Adoption Safely & Securely</h2>
    <p>Our platforms empower women considering adoption by providing choice and privacy.</p>
    <a href="#" class="link">
      <span>Learn more </span>
      <i class="fa-solid fa-circle-arrow-right"></i>
    </a>
  </section>

  <figure class="image">
    <img src="https://i.ibb.co/zNPS1z7/mother.jpg" alt="Birthmother at computer">
  </figure>
</article>

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

figure {
    display: table;
}
img, figcaption {
    display: table-cell;
    vertical-align: bottom;
}
figcaption {
    padding-left: 4px;
}

figure {
    display: table;
    width: 1px; /* This can be any width, so long as it's narrower than any image */
}
img, figcaption {
    display: table-row;
}