Resize only when there is not enough horizontal space to avoid horizontal scroll bar-CodePudding

Image on the left, text on the right. Image size is unknown. I want to display the image in its original size. I want the text at least 10-character wide (i.e., not too narrow).

If I resize the browser window to make it narrow, when the text cannot become narrower, the page shows horizontal scroll bar. Can I at this point reduce the image width instead? Again, image size is not fixed. I wonder if this can be done with CSS only, or if I use JavaScript.

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

<head>
    <meta charset="utf-8">
    <style>
        .item {
            display: flex;
        }

        .rightText {
            margin-top: 0;
            margin-left: 1em;
            min-width: 10em;
        }
    </style>
</head>

<body>
    <div >
        <img src="https://www.asahicom.jp/and/data/wp-content/uploads/2018/08/1-1.jpg"/>
        <div >
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
        </div>
    </div>
</body>

</html>

CodePudding user response：

Do you mean something like this?

.item {
    display: flex;
}

.item img{
   max-width:calc(100% - 11em);
}

.rightText {
    margin-top: 0;
    margin-left: 1em;
    min-width: 10em;
}

<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <div >
        <img src="https://www.asahicom.jp/and/data/wp-content/uploads/2018/08/1-1.jpg"/>
        <div >
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
        </div>
    </div>
</body>

</html>

CodePudding user response：

You can try something like this:

img {
  object-fit: cover;
  width: 200px;
  height: 200px;
}

Change the width and height to something you feel looks good as a starter and see how it works, let me know.

CodePudding user response：

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

<head>
    <meta charset="utf-8">
    <style>
      img{
       max-width:100%;
      }
        .item {
            display: flex;
        }
        .rightText {
            min-width:10ch;
            margin-left: 1em;
        }
    </style>
</head>

<body>
    <div >
        <div >
           <img src="https://www.asahicom.jp/and/data/wp-content/uploads/2018/08/1-1.jpg"/>
        </div>
        <div >
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
        </div>
    </div>
</body>

</html>

Is this what you had in mind?