引导4：图像正在旋转，我似乎无法在不覆盖css属性的情况下旋转图像

Question

我正在使用引导程序 4 制作网页，我选择的图像向右旋转并且无法正确呈现。

在此处输入图像描述

我看到的问题是使图像旋转而不会过度写入其他 css 属性。

在这种情况下：img类："img-fluid">

<div class="row">
<div class="col-lg-4">
<!--  STYLE  SECTION
<style type="text/css">
img {      transform: rotate(270deg);        }
</style>
-->
<img class="img-fluid" alt="Bootstrap Image Preview" src="C:Additional FoldersHarvard CS50Project 0project0layoutitsrclarger pic.jpg">
</div>
<div class="col-lg-8">

正如您可能在上面注意到的那样，我成功地在 html 代码中使用样式标签旋转了图像，但这会使图像交叉到其他div 中并且不起作用。

另一个问题是引导 4 有很多 css 页面，我不确定我是否正在进行稍后不会覆盖的更改。

例如： 在此处输入图像描述

我开始认为我的图像以这种方式渲染，因为它是一个矩形图像，并且图像属性的宽度不够宽，或者它可能呈现得很宽。

有人有这方面的经验吗？ 您的帮助将不胜感激。

谢谢！！

Answer 1

当您旋转图像时，如果您不希望它传递给其他div，则可以隐藏图像的悬垂部分。喜欢这个：

<div class="col-lg-4 img-container" style="overflow: hidden; height: "to fit on the screen"; width: "to fit on the screen">

.CSS：

.img-container{
height: "you have to arrange it yourself";
width: "you have to arrange it yourself";
overflow: "hidden";
};

当您这样做时，图像的一部分可能不可见。您可以调整图片的大小并将其放在屏幕上。此外，如果您不想使用 css 旋转图像，有些程序会在您上传图像之前对其进行编辑。喜欢 ： http://convert-my-image.com/ImageConverter;

如果您不想更改引导程序本身的属性，我建议您为使用的类分配自己的私有名称。因此，引导不受您所做的更改的影响。