CSS

CSS – positionを使わずに親要素から横へはみ出させる

positionを使わずに親要素からはみ出させるにはwidthとmarginのパーセント調整で可能です。例えば下記のように設定することで親要素からはみ出すことができます。

.wrap-contents{
    width: 600px;
    margin: auto;
}
img{
    width: 120%;
    margin: 10px -10%;
}

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            overflow-wrap: anywhere;
        }
        .wrap-contents{
            width: 600px;
            margin: auto;
        }
        img{
            width: 120%;
            margin: 10px -10%;
        }
    </style>
</head>
<body>
    <div class="wrap-contents">
        <h1>Title.</h1>
        <div class="img-box">
            <img src="https://images.unsplash.com/photo-1762789291015-51c5a710c73c?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
        </div>
        <p>sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.</p>
        <div class="img-box">
            <img src="https://images.unsplash.com/photo-1762789291015-51c5a710c73c?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
        </div>
        <p>sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.</p>
        <p>sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.sample.</p>
        <p>sample.sample.sample.sample.</p>
    </div>
</body>
</html>