<div class="layout">
  <article class="card">
    <div>
      <div class="card-image-placeholder">
        画像の代わりの文字列
      </div>
    </div>
    <div>
      <p class="card-text">プレースホルダーの場合
      </p>
    </div>
  </article>
  <article class="card">
    <div>
      <img id="image" class="card-image" src="https://raw.githubusercontent.com/sousyokunotomonokai/resources/8d9619dd8d1bc9b8ab9bd0eb2a3b10a41178064c/image/1280x670.png" />
    </div>
    <div>
      <p class="card-text">
        画像表示の場合
      </p>
    </div>
  </article>
</div>

<div class="buttons">
  <button onClick="setVerticalAlignTop()">
    画像のvertical-align: top; にする
  </button>
  <button onClick="unsetVerticalAlign()">
    画像のvertical-align: unset; (初期値)にする
  </button>
.layout {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.card {
  display: inline-block;
  aspect-ratio: 1 / 1;
  width: 400px;
  border-radius: 8px;
  border: 1px black solid;
}

.card-image {
  aspect-ratio: 1280 / 670;
  width: 100%;
  height: auto;
}

.card-image-placeholder {
  aspect-ratio: 1280 / 670;
  width: 100%;
  height: auto;
  display: grid;
  place-items: center;
  background: green;
  color: white;
}

.card-text {
  margin: 8px;
  border-top: 1px blue solid;
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 16px;
}

function setVerticalAlignTop() {
  const element = document.getElementById("image");
  element.style.verticalAlign = "top";
}

function unsetVerticalAlign() {
  const element = document.getElementById("image");
  element.style.verticalAlign = "unset";
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.