1

I am unable to determine what to change so that after 960px break point the image would show as square on the right side of the paragraph.

According to the instructions I have been given:

It says,The HTML really only requires you to edit the img tag to include a "srcset" and a "sizes" attribute. This should be able to be accomplished in just a few lines of code and one tag.

The images you need to make are fairly straightforward, only one large sized square image and four optimal sizes in landscape (before 960px) done largely the same as we did in the in-class demo. The magic comes in the “sizes” attribute where we can define a breakpoint and the two required “placeholder” sizes. The “vw” or “viewport width” unit should be useful here.

End result after going 960px breakpoint

My HTML code that I have tried:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Picture This!</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header class="header">
    <div class="title">
      <h1>Picture This!</h1>
      <h4>My Really Cool Blog Post</h4>
    </div>
    
    <img src="images/museum_landscape_320px.jpg" alt="Picture of historical museum"
      srcset="images/museum_landscape_320px.jpg 320w,
              images/museum_landscape_480px.jpg 480w,
              images/museum_landscape_720px.jpg 720w,
              images/museum_square_800px.jpg 800w,
              images/museum_landscape_960px.jpg 960w"
      sizes="(min-width: 960px) 800px, 50vw">
  </header>
</body>

</html>
colidyre
  • 4,170
  • 12
  • 37
  • 53
Enhance
  • 11
  • 2
  • I don't have the full solution to this but I think you might want to use `sizes="(max-width: 960px) 100vw, 50vw"` – drak Jun 09 '23 at 09:25

1 Answers1

0

If you are looking for a perfect square of an image, You would want to make the image's width and height the same

Here's a simple example:

HTML:

<img class="image" src="example.jpg" />

CSS:

.image {
  width: 400px;
  height: 400px;
  object-fit: cover;
}

If we use [object-fit: cover;] the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.

https://www.w3schools.com/css/css3_object-fit.asp

Sayan
  • 43
  • 5