Html 如何在css中旋转块时调整内容宽度、高度

发布于10月10日

互联网上有很多解决方案，但它们要么都是拐杖，要么不能正常工作.也许在2023年，有一种方法可以在旋转时更正确地拉伸元素的宽度和调整高度？

下面是代码和出现的问题.您可以看到，包含图像的块超出了包装器，并且拉伸不够宽.

.wrapper {
  border: 2px solid grey;
  display: flex;
  align-items: center;
  padding: 10px;
  height: 140px;
  width: 300px;
}


.left {
  flex-grow: 1;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  border: 2px solid red;
}

.imgwrapper {
  border: 2px solid green;
  width: 70px;
  height: 100%;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-100%);
}

img {
  width: 100%;
  height: 100%;
}

<div class=wrapper>
  <div class="left">
    <div class="lefttop">Top text</div>
    <div class="leftbottom">Bottom text</div>
  </div>
  <div class="imgwrapper">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/EAN8.svg/1200px-EAN8.svg.png" alt="">
  </div>
</div>

Expected result: It should be something like this ( but of course wrapper width and height can be different ):

Update:个由于这个条形码是我在真正的应用程序中自己生成的，所以我想它是最好将数字作为另一个分量与绝对值相加，以节省质量

.wrapper { border: 2px solid grey; display: flex; align-items: center; padding: 10px; height: 140px; width: 300px; } .left { flex-grow: 1; height: 100%; display: flex; justify-content: space-between; flex-direction: column; border: 2px solid red; } .imgwrapper { width: 70px; height: 100%; transform-origin: top left; }

<div class=wrapper> <div class="left"> <div class="lefttop">Top text</div> <div class="leftbottom">Bottom text</div> </div> <div class="imgwrapper"> <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> <title>EAN</title> <image preserveAspectRatio="none" transform="rotate(-90)" transform-origin="50% 50%" href="https://upload.wikimedia.org/wikipedia/commons/6/6d/Hitman_barcode.svg" width="100" height="100" /> </svg> </div> </div>

Html 如何在css中旋转块时调整内容宽度、高度

推荐答案

Html相关问答推荐

当ul为Flex时，使ul元素在指定高度内可垂直滚动

当表头包含特殊字符时，R Quarto发布的HTML表中不必要的大列宽

放大缩小标题在外面的图像

如何在将文本垂直居中的同时将文本右对齐？

将表格背景图像置于行背景 colored颜色之上

水平卷轴的内容保持堆叠

如何在R中渲染Quarto文档时动态设置html文件名

将导航项目底部边框与导航栏对齐

CSS中的转换属性是如何工作的？

文本css后面未显示背景 colored颜色

浮动Div在CSS中未按预期工作

我在桌面版 html css 代码上给出了位置 margin-left margin-top 标签，如何将其删除到手机上以使其响应？

带圆角帽的 CSS 部分边框

绝对类在另一个绝对类之上

CSS 随着内容宽度的增加而减少填充

暗模式转换器

Header 或 P 标记中的填充不能与 em 单元一起正常工作

如何将我的输入值固定到 2022 年 12 月？

为什么将 p 元素的垂直边距设置为 1 px 会出现滚动条？

动态使用时波浪号不转换为绝对路径