blocks|key|5985060|text|为父级提供overflow:+hidden样式。如果它是重叠的兄弟元素，则必须将其放入具有固定高度/宽度的容器中，并为其赋予overflow:+hidden样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5985061|entityMap^0|5|G|1Q|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Give the parent a style of <code>overflow: hidden</code>. If it is overlapping sibling elements, you will have to put it inside of a container with a fixed height/width and give that a style of <code>overflow: hidden</code>.</p>


blocks|key|426788|text|问题是图像看起来不是正方形的，浏览器也会进行相应的调整。旋转后，通过更改图像边距来确保尺寸保持不变。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|426789|.imagetest+img+{
++transform:+rotate(270deg);
++...
++margin:+10px+0px;
}|code-block|syntax|javascript|426790|数量将取决于图像的高度x宽度的差异。您可能还需要添加display:inline-block;或display:block以使其识别边距参数。|offset|length|style|CODE|426791|entityMap^0|0|0|Q|L|1C|D|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>The trouble looks like the image isn't square and the browser adjusts as such.
After rotation ensure the dimensions are retained by changing the image margin.</p>

<pre><code>.imagetest img {
  transform: rotate(270deg);
  ...
  margin: 10px 0px;
}
</code></pre>

<p>The amount will depend on the difference in height x width of the image.
You may also need to add <code>display:inline-block;</code> or <code>display:block</code> to get it to recognize the margin parameter.</p>


blocks|key|4256661|text|我知道这个话题很老了，但是没有正确的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4256662|旋转变换将元素从其中心旋转，因此，较宽的元素将以这种方式旋转：|4256663|​|4256664|📷|atomic|offset|length|4256665|4256666|应用overflow:+hidden会隐藏最长的尺寸，如下所示：|style|CODE|4256667|4256668|4256669|4256670|4256671|img{
++border:+1px+solid+#000;
++transform:++++++++++rotate(270deg);
++-ms-transform:++++++rotate(270deg);
++-moz-transform:+++++rotate(270deg);
++-webkit-transform:++rotate(270deg);
++-o-transform:+++++++rotate(270deg);
}
.imagetest{
++overflow:+hidden
}|code-block|syntax|javascript|4256672|<article>
<section+class="photo">
<div></div>
<div+class="imagetest">
<img+src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF"+width=100%25/>
</div>
</section>
</article>|4256673|4256674|所以，我所做的是一些计算，在我的例子中，图片的宽度是455px，高度是111px，我们必须根据这些尺寸添加一些页边距：|4256675|左边距：(-height)/2|4256676|上边距：(height+-+width)/2|unordered-list-item|4256677|4256678|在CSS中：|4256679|margin:+calc((455px+-+111px)/2)+calc((111px+-+455px)/2);|4256680|结果：|4256681|4256682|4256683|4256684|4256685|img{
++border:+1px+solid+#000;
++transform:++++++++++rotate(270deg);
++-ms-transform:++++++rotate(270deg);
++-moz-transform:+++++rotate(270deg);
++-webkit-transform:++rotate(270deg);
++-o-transform:+++++++rotate(270deg);
++/*+455+*+111+*/
++margin:+calc((455px+-+111px)/2)+calc((111px+-+455px)/2);
}|4256686|<article>
<section+class="photo">
<div></div>
<div+class="imagetest">
<img+src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF"+/>
</div>
</section>
</article>|4256687|4256688|我希望它能帮助一些人！|4256689|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/612d04ed8ba01c47aadf47285ae4cad0.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/8e3a721008e44482696f1954bbde0c05.png|2|https://ask.qcloudimg.com/http-save/yehe-900000/424130ff8276f1b723ca14871009d0ae.png^0|0|0|0|0|1|0|0|0|2|G|0|0|0|1|1|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|1|2|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|23|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|24|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|25|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|26|8|@]|9|@$I|27|J|28|1|29]]|A|$]]|$1|K|3|E|5|6|7|2A|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|2B|8|@$I|2C|J|2D|N|O]]|9|@]|A|$]]|$1|P|3|E|5|6|7|2E|8|@]|9|@]|A|$]]|$1|Q|3|G|5|H|7|2F|8|@]|9|@$I|2G|J|2H|1|2I]]|A|$]]|$1|R|3|E|5|6|7|2J|8|@]|9|@]|A|$]]|$1|S|3|E|5|6|7|2K|8|@]|9|@]|A|$]]|$1|T|3|U|5|V|7|2L|8|@]|9|@]|A|$W|X]]|$1|Y|3|Z|5|V|7|2M|8|@]|9|@]|A|$W|X]]|$1|10|3|E|5|6|7|2N|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|2O|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|2P|8|@]|9|@]|A|$]]|$1|15|3|16|5|17|7|2Q|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|2R|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|2S|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|V|7|2T|8|@]|9|@]|A|$W|X]]|$1|1D|3|1E|5|6|7|2U|8|@]|9|@]|A|$]]|$1|1F|3|E|5|6|7|2V|8|@]|9|@]|A|$]]|$1|1G|3|G|5|H|7|2W|8|@]|9|@$I|2X|J|2Y|1|2Z]]|A|$]]|$1|1H|3|E|5|6|7|30|8|@]|9|@]|A|$]]|$1|1I|3|E|5|6|7|31|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|V|7|32|8|@]|9|@]|A|$W|X]]|$1|1L|3|1M|5|V|7|33|8|@]|9|@]|A|$W|X]]|$1|1N|3|E|5|6|7|34|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|6|7|35|8|@]|9|@]|A|$]]|$1|1Q|3|-4|5|6|7|36|8|@]|9|@]|A|$]]]|1R|$1S|$5|1T|1U|1V|A|$1W|1X|1Y|-4]]|1Z|$5|1T|1U|1V|A|$1W|20|1Y|-4]]|21|$5|1T|1U|1V|A|$1W|22|1Y|-4]]]]

<p>I know this topic is old, but there are no correct answers.</p>

<p>rotation transform rotates the element from its center, so, a wider element will rotate this way:</p>

<p><a href="https://i.stack.imgur.com/ckIa3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ckIa3.png" alt="enter image description here"></a></p>

<p>Applying <code>overflow: hidden</code> hides the longest dimension as you can see here:</p>

<p><a href="https://i.stack.imgur.com/XICEs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XICEs.png" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>img{
  border: 1px solid #000;
  transform:          rotate(270deg);
  -ms-transform:      rotate(270deg);
  -moz-transform:     rotate(270deg);
  -webkit-transform:  rotate(270deg);
  -o-transform:       rotate(270deg);
}
.imagetest{
  overflow: hidden
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;article&gt;
&lt;section class="photo"&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div class="imagetest"&gt;
&lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" width=100%/&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/article&gt;</code></pre>
</div>
</div>
</p>

<p>So, what I do is some calculations, in my example the picture is 455px width and 111px height and we have to add some margins based on these dimensions:</p>

<ul>
<li>left margin: (width - height)/2</li>
<li>top margin: (height - width)/2</li>
</ul>

<p>in CSS:</p>

<pre><code>margin: calc((455px - 111px)/2) calc((111px - 455px)/2);
</code></pre>

<p>Result:</p>

<p><a href="https://i.stack.imgur.com/3KWrx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3KWrx.png" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>img{
  border: 1px solid #000;
  transform:          rotate(270deg);
  -ms-transform:      rotate(270deg);
  -moz-transform:     rotate(270deg);
  -webkit-transform:  rotate(270deg);
  -o-transform:       rotate(270deg);
  /* 455 * 111 */
  margin: calc((455px - 111px)/2) calc((111px - 455px)/2);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;article&gt;
&lt;section class="photo"&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div class="imagetest"&gt;
&lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" /&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/article&gt;</code></pre>
</div>
</div>
</p>

<p>I hope it helps someone!</p>


blocks|key|5985193|text|使用transform:+rotate(xdeg)执行旋转，并将overflow:+hidden应用于父组件以避免重叠效果|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5985194|.div-parent+{
+++overflow:+hidden
}

.div-child+{
+++transform:+rotate(270deg);
}|code-block|syntax|javascript|5985195|entityMap^0|2|N|W|G|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>Perform rotation using <code>transform: rotate(xdeg)</code> and also apply <code>overflow: hidden</code> to the parent component to avoid overlapping effect</p>
<pre><code>.div-parent {
   overflow: hidden
}

.div-child {
   transform: rotate(270deg);
}
</code></pre>


<p>I would like to rotate an image by 90 degrees with CSS only.</p>
<p>I can do the rotation, but then the position of the image is not what it should be. First, it will overlay some  other elements in the same <code>&lt;div&gt;</code>. Second, its vertical dimension will become bigger than the containing <code>&lt;div&gt;</code>.</p>
<p>Here is my code where the two classes are defined:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.imagetest img {
  transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  width: 100%;
}

.photo {
  width: 95%;
  padding: 0 15px;
  margin: 0 0 10px 0;
  float: left;
  background: #828DAD;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;article&gt;
  &lt;section class="photo"&gt;
    &lt;div&gt;Title&lt;/div&gt;
    &lt;div class="imagetest"&gt;
      &lt;img src="https://picsum.photos/200/100"/&gt;
    &lt;/div&gt;
  &lt;/section&gt;
&lt;/article&gt;</code></pre>
</div>
</div>
</p>
<p>Is there a way of keeping the image within the section? I can translate and scale the image so that it is within the section, but that works only, if I know the image size beforehand. I would like to have a reliable method that does not depend on the size.</p>


How to rotate image with CSS only?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想旋转一个CSS的图像只有90度。我可以做旋转，但是图像的位置不是它应该的位置。首先，它将覆盖相同<div>中的一些其他元素。其次，它的垂直维度将变得比包含的<div>更大。下面是定义这两个类的代码：​.imagetest img {  transform: rotate(270deg);  -ms-transfor...

问如何仅使用CSS旋转图像？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何仅使用CSS旋转图像？EN