Question

以下是我网站上关于上述图片的页面链接。 about.html

我已经通过谷歌搜索＆＃34;错误的图像旋转html和css＆＃34;对我自己做了一些研究。并找到了图像方向：-90deg;我设置为-90degrees的属性，正如您在提供的代码中看到的那样，尝试将图像旋转到所需的方向。

我使用Chrome并且该属性没有用，所以我也在Firefox中尝试了该页面，但仍然存在错误的方向。

我还检查了开发工具，看看该属性是否被识别，并发现该属性旁边有一个黄色警告标志，表明该属性未被识别

我可以用任何替代方法解决这个问题吗？

以下是与页面上图片相关的HTML代码块：

<div class="grid">
<img class="col-6" src="roughsite/framework/images/pele.jpg" alt="A picture of me!">
</div>

以下是与上面的html代码相关的CSS：

.grid {
margin: 0 auto;
max-width: 960px;
width: 100%;}

.col-6{
width:50%;}

如果问题不够清楚，或者您对以后的问题有任何改进，请在评论中告诉我。我不会被冒犯！三江源。

Answer 1

您可以使用 CSS转换属性

/* Rotate div */
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);

Answer 2

正如dsenese1所提出的，你可以使用transform。您也可以使用一些边距，这样旋转不会使图像与其他元素重叠。

变换后的元素保留在原始位置和大小的通量中，只有视觉被转换，这就是为什么我建议使用保证金

基本上，您可以使用这样的选择器：

div[class="grid"] img{
    transform:rotate(-90deg);
    margin:100px 0 80px 
}

下面的演示

div[class="grid"] img{
	transform:rotate(-90deg);
	margin:100px 0 80px	
}

/* add borders to the div to see where it stands : */
div[class="grid"] {
	border:solid;
}

<link href="http://79.170.40.175/learnwprotherham.co.uk/roughsite/framework/css/main.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="grid height n1">
    <div class="row">
	  <div class="col-12" id="ycmtxt">
	  <div id="toppad">Pele Butcher...Achieving is believing in yourself!</div></div>
	</div>
</div>

<div class="grid height" id="navpad">
    <div class="row">
      <a class="col-3 n1" href="about.html"><div>About Me</div></a>
      <a class="col-2 n1" href="portfolio.html"><div>Portfolio</div></a>
	  <a class="col-2 n1" href="cv.html"><div>CV</div></a>
	  <a class="col-2 n1" href="blog.html"><div>Blog</div></a>
	  <a class="col-3 n1" href="contact.html"><div>Contact</div></a>
	</div>
</div>

<div class="grid">
<img class="col-6" src="http://79.170.40.175/learnwprotherham.co.uk/roughsite/framework/images/pele.jpg" alt="A picture of me!">
</div>

Answer 3

这个答案非常有效，也消除了我需要进行大量及时编辑的需要。我将进一步研究css以理解GCyrillus提供的代码

正如dsenese1所提出的，你可以使用transform。你也可以用一些边距因此旋转不会使图像与其他元素重叠。

变形元素保留在原始位置和大小的通量中，只有视觉被转换，这就是我提出的原因使用保证金

基本上，您可以使用这样的选择器：

div[class="grid"] img{
  transform:rotate(-90deg);
  margin:100px 0 80px 
}

___下面的演示

> 
>     div[class="grid"] img{
>     	transform:rotate(-90deg);
>     	margin:100px 0 80px	
>     }
> 
>     /* add borders to the div to see where it stands : */
>     div[class="grid"] {
>     	border:solid;
>     }
> 
>

> 
>     <link href="http://79.170.40.175/learnwprotherham.co.uk/roughsite/framework/css/main.css" rel="stylesheet"/>
>     <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
>     <div class="grid height n1">
>         <div class="row">
>     	  <div class="col-12" id="ycmtxt">
>     	  <div id="toppad">Pele Butcher...Achieving is believing in yourself!</div></div>
>     	</div>
>     </div>
> 
>     <div class="grid height" id="navpad">
>         <div class="row">
>           <a class="col-3 n1" href="about.html"><div>About Me</div></a>
>           <a class="col-2 n1" href="portfolio.html"><div>Portfolio</div></a>
>     	  <a class="col-2 n1" href="cv.html"><div>CV</div></a>
>     	  <a class="col-2 n1" href="blog.html"><div>Blog</div></a>
>     	  <a class="col-3 n1" href="contact.html"><div>Contact</div></a>
>     	</div>
>     </div>
> 
>     <div class="grid">
>     <img class="col-6" src="http://79.170.40.175/learnwprotherham.co.uk/roughsite/framework/images/pele.jpg" alt="A picture of me!">
>     </div>
> 
>

我还要感谢Paulie_D建议使用

-ms-transform: rotate(-90deg); /* IE 9 */ -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ transform: rotate(-90deg);

将图像旋转到正确的位置。我没有使用它，因为我必须手动设置图像的高度和宽度，并在我的css文件中添加更多代码。三江源。

如何在我的网站上将图像设置为正确的旋转？

3 个答案: