CSSで画面横幅いっぱいまで伸ばすには？

/ CSS / By
ショコラ
ショコラ

CSSで画面横幅いっぱいまで伸ばすには？

width: 100vw で伸ばして、margin-left: calc(-50vw + 50%) で中央に配置します。

もっさん先輩
もっさん先輩
<html>
<body>
<style>
img
{
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
</style>
<img src="https://answorz.com/wp-content/uploads/2023/03/Screenshot_20230325_085823-640.png">
</body>
</html>

私の場合は、セグメントの背景イメージに設定した。ボーダーが見えていたので、ボーダーを消しました。

<html>
<body>
<style>
img
{
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border:none;
  border-radius:0px;
}
</style>
<img src="https://answorz.com/wp-content/uploads/2023/03/Screenshot_20230325_085823-640.png">
</body>
</html>

以上

Scroll to Top