gpt4 book ai didi

html - 在 div 上切 Angular ,图像设置为 100% 高度和宽度

转载 作者:太空狗 更新时间:2023-10-29 15:00:49 28 4
gpt4 key购买 nike

这基本上就是我想要实现的 --> https://jsfiddle.net/tak1pyt7/1/

.clip {
width: 500px;
height: 500px;
-webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
height: 100%;
width: 100%;
}
<body>
<div class="clip">
<img src="http://lorempixel.com/600/600/" width="100%" height="100%" />
</div>
</body>

虽然我有一个解决方案,但 fiddle 中的代码存在各种问题,如下所示:

  • 它在 IE 或 Edge 中不起作用,因为不支持剪辑路径
  • 剪辑路径不支持 firefox 中的 css 形状,如果你需要让它在 firefox 中工作,那么你需要提供内联 svg
  • 也尝试提供内联 svg,但它有自己的一系列问题,无法解决我的要求。无论容器的高度和宽度如何,我都需要切割尺寸保持不变。使用立即剪切图像的内联 svg,它的尺寸会随着高度和宽度的变化而变化,即剪切是响应式的。我需要切割的静态尺寸。

除了上述解决方案外,我还搜索了很多解决方案,这些解决方案可能会帮助我创建带切 Angular 的 div,并且切 Angular 本身是透明的,因为我的背面没有纯色背景。

探索的其他解决方案

使用 CSS3 渐变示例

使用 CSS 边框

使用 jQuery 插件 ( http://jquery.malsup.com/corner/ )

一个可行但非常 HACKY 的解决方案

  • 示例 --> http://jsfiddle.net/26v7pfLb/

  • 我现在正在为具有固定高度和宽度的容器使用此解决方案,但我的应用程序中有一个页面,其中容器具有静态宽度但动态高度。在那种情况下,黑客将很难实现,而且个人使用这个解决方案似乎很奇怪。

  • 我正试图找到更优雅、更干净的东西来在 CSS 中实现这种解决方案

任何指针都会有所帮助。

最佳答案

您可以使用我在这个问题中描述的方法:Cut Corners using CSS使用带有 overflow:hidden;

的旋转容器

对于您的示例(因为您想在元素内显示图像),您需要像这样“取消旋转”内容:

.clip {
margin: -150px 0 0 -150px;
display: inline-block;
transform: rotate(-45deg);
overflow: hidden;
}
img {
margin: 150px 150px 0 150px;
display: block;
transform: rotate(45deg);
}
body{background:url(http://lorempixel.com/output/nature-q-g-640-480-7.jpg);background-size:cover;}
<div class="clip">
<img src="http://lorempixel.com/600/600/" />
</div>

此解决方案还需要使用边距或绝对定位进行定位。

关于html - 在 div 上切 Angular ,图像设置为 100% 高度和宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32370083/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com