Web Design Leaves

<div class="aspect-box width-box">width: 200px</div>
<div class="aspect-box height-box">height: 100px</div>
<div class="aspect-box width-height-box">width: 200px height: 200px</div>
<div class="aspect-box no-width-no-height">no width & no height </div>

.aspect-box {
  aspect-ratio: 16/9;
}
.width-box {
  width: 200px;  /* width のみを指定 */
  background-color: #4d6fbe;
}
.height-box {
  height: 100px;  /* height のみを指定 */
  background-color: #7aac81;
}
.width-height-box {
  width: 200px;  /* width と height の両方を指定 */
  height: 200px;
  background-color: #bc7a87;
}
.no-width-no-height {
  background-color: #6cb8c9; /* width と height の指定なし */
}

.aspect-box2 {
  aspect-ratio: 2/1;
  width: 33%; /* 幅を指定 */
  background-color: #7aac81;
  color: #ddd;
  padding: 1rem;
}
.box-wrapper2 {
  display: flex;
  align-items: flex-start; /* デフォルトの stretch 以外を指定 */
  gap: 1rem;
}

<div class="box-wrapper2">
  <div class="aspect-box2">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
  </div>
  <div class="aspect-box2">
    <p>Minima maxime odio nihil quibusdam quae iste iure numquam molestias ratione ea, veritatis...</p>
  </div>
</div>

.aspect-box3 {
  aspect-ratio: 2/1;
  height: 100px;  /* 高さを指定 */
  background-color: #7aac81;
  color: #ccc;
  padding: 1rem;
}

<img class="aspect-img" src="../images/sample.jpg" alt="lotus">

img.aspect-img {
  aspect-ratio: 1618/1000;
  object-fit: cover;
  display: block;
  width: 100%;
  height: auto;  /* img 要素に height 属性が指定されている場合は設定 */
  max-width: 300px; /* 必要に応じて */
}

<div class="aspect-img-bg"></div>

.aspect-img-bg {
  aspect-ratio: 1/1;
  max-width: 200px;
  background-image: url(../images/css/cp-01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 30% 50%;
}

<div class="aspect-parent">
  <img src="../images/sample.jpg" alt="lotus">
  <div class="cover"></div>
</div>

.aspect-parent {
  aspect-ratio: 2/1;
  position: relative; /* 絶対配置の基準 */
  width: 40%;
  overflow: hidden;
}
.aspect-parent img {
  position: absolute; /* 絶対配置 */
  width: 100%;  /* 明示的に幅を設定（必須） */
  height: 100%; /* 明示的に高さを設定（必須） */
  object-fit: cover; /* コンテンツボックスに収まるように拡大縮小 */
}
.cover {
  position: absolute; /* 絶対配置 */
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  /* または
  width: 100%;
  height: 100%; */
  background-color: #7aac81;
  opacity: 1;
  transition: transform .3s, opacity .5s;
}
.aspect-parent:hover .cover {
  transform: translateY(-100%);
  opacity: 0;
}

<div class="fbox-images">
  <img src="../images/sample01.jpg" alt="lotus">
  <img src="../images/sample02.jpg" alt="hydrangea">
  <img src="../images/sample03.jpg" alt="hydrangea">
</div>

.fbox-images {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 740px;
}

.fbox-images img {
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  width: calc(33.3% - 4px);
}

@media (max-width: 920px) {
  .fbox-images img {
    width: calc(50% - 4px);
  }
}

<div class="gmap">
  <!-- Googel Map の埋め込みコード -->
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3240.88852697053!2d139.8059981!3d35.6797467!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018891bfc592aad%3A0xd222029e041bd31b!2z44CSMTM1LTAwMjIg5p2x5Lqs6YO95rGf5p2x5Yy65LiJ5aW977yU5LiB55uu77yR4oiS77yRIOadseS6rOmDveePvuS7o-e-juihk-mkqA!5e0!3m2!1sja!2sjp!4v1621326065459!5m2!1sja!2sjp" width="500" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

.gmap {
  margin: 50px 0px;
  max-width: 500px;
  padding: 4px;
  border: 1px solid #CCC;
}
.gmap iframe {
  aspect-ratio: 2/1;  /* 好みのアスペクト比を指定 */
  height: 100%;       /* height に 100% を指定 */
  width: 100%;        /* width に 100% を指定 */
}

<div class="yt-wrapper">
  <!-- YouTubeの埋め込みコード -->
  <iframe width="500" height="375" src="https://www.youtube.com/embed/dH3GSrCmzC8" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

.yt-wrapper {
  max-width: 500px;   /* 最大幅を指定 */
}
.yt-wrapper iframe {
  aspect-ratio: 4/3;  /* 好みのアスペクト比を指定 */
  height: 100%;       /* height に 100% を指定 */
  width: 100%;        /* width に 100% を指定 */
}

<div class="parent3">
  <div class="child3"></div>
</div>

.parent3 {
  position: relative;    /* 子要素（.child3）を配置する基準とする */
  width: 50%;
  overflow: hidden;
}

.parent3::before {
  content: "";  /* 空文字列 */
  display: block;   /* display: block でブロック要素に */
  padding-top: 56.25%;    /* 16:9 のアスペクト比 */
}

.child3 {
  position: absolute; /* 絶対配置 */
  top: 0;
  left: 0;
  width: 100%;  /* 幅 100% */
  height: 100%;  /* 高さ 100% */
  background-color: #7aac81;
}

<div class="flex">
  <div class="card2">
    <div class="img-wrapper">
      <img src="../images/golden.jpg" alt="painting on the window">
    </div>
    <p>Aspernatur, accusantium reprehenderit tenetur...</p>
  </div>
  <div class="card2">
    <div class="img-wrapper">
      <img src="../images/4x3.jpg" alt="Manhattan sunset">
    </div>
    <p>Commodi ducimus nisi incidunt eos debitis alias ...</p>
  </div>
  <div class="card2">
    <div class="img-wrapper">
      <img src="../images/16x9.jpg" alt="NY drug store">
    </div>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit...</p>
  </div>
</div>

.card2 {
  flex: 0 0 33%; /* 基準幅を 33% として３列で表示（伸縮なし） */
  border: 1px solid #ccc;
  margin: 0 10px;
}

.img-wrapper {
  position: relative;  /* img 要素を配置する基準とする */
}

.img-wrapper::before {
  content: "";
  display: block;  /* display: block でブロック要素に（inline 以外を指定） */
  padding-top: 56.25%;  /* 16:9 のアスペクト比 */
}

.card2 img {
  object-fit: cover;
  position: absolute;   /* 絶対配置 */
  top: 0;
  left: 0;
  width: 100%;  /* 幅 100% */
  height: 100%;  /* 高さ 100% */
}

.card2 p {
  padding: 10px;
}

<!-- width 属性と height 属性を設定（単位は付けない） -->
<img class="foo" src="foo.jpg" width="640" height="360" alt="foo の写真">

img {
  width: 100%;
  height: auto;  /* 自動的に調整されるように auto を設定  */
}

img.foo {
  width: 80%;
  max-width: 600px;
}