文章/答案/技术大牛

发布

社区首页 >问答首页 >只有在没有足够的水平空间以避免水平滚动条时才调整大小

问只有在没有足够的水平空间以避免水平滚动条时才调整大小
EN

Stack Overflow用户

提问于 2022-11-16 14:05:48

回答 3查看 37关注 0票数 1

图像在左边，文本在右边。图像大小未知。我想把图像显示成原来的大小。我希望文本至少10个字符宽(即，不要太窄)。

如果我调整浏览器窗口的大小使其变窄，当文本不能变窄时，页面将显示水平滚动条。我能在这一点上减少图像宽度吗？同样，图像大小不是固定的。我想知道这是否可以只使用CSS，或者我是否使用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 class="item">
        <img src="https://www.asahicom.jp/and/data/wp-content/uploads/2018/08/1-1.jpg"/>
        <div class="rightText">
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
            きこえるかしらひずめの音ゆるやかな丘をぬってかけてくる馬車
        </div>
    </div>
</body>

</html>

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-11-16 14:23:42

你是说像这样的事吗？

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

</html>

票数 0

Stack Overflow用户

发布于 2022-11-16 14:11:17

你可以试试这样的东西：

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

改变宽度和高度的东西，你觉得很好作为一个启动，看看它如何工作，让我知道。

票数 0

Stack Overflow用户

发布于 2022-11-16 14:27:12

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

</html>

你就是这么想的吗？

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74461838

复制

相似问题

问只有在没有足够的水平空间以避免水平滚动条时才调整大小
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问只有在没有足够的水平空间以避免水平滚动条时才调整大小EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问只有在没有足够的水平空间以避免水平滚动条时才调整大小
EN