定位偏移div/图片 [英] Positioning Offset div / Images

问题描述

我想获得这个结果(请参见下图示例).

I would like to achieve this result (see this example image).

首先，我尝试使用CSS创建局部边框(使用div:after).问题:我有几张格式不同的图像，但不能正常工作.因此，我尝试了使用position: relative的背景div和position: absolute中的图像.

First, I’ve tried to create partial borders with CSS (using div:after). Problem : I have several images with different formats and it is not working properly. So, I’ve tried with a background div with position: relative and an image in position: absolute.

它可以工作，但是在响应模式下不容易处理.我需要为包含图像的div设置一个with和一个高度，有时容器太大.

Its works but it’s not easy to handle in responsive mode. I need to set a with and a height to the div which contains the image and sometime the container is too big.

.container-image-border {
  margin-top: 40px;
  background-color: #fd9220;
  position: relative;
  width: 150px;
  height: 250px;
}

.container-image-border img {
  position: absolute;
  top: -30px;
  right: -30px;
}

<div class="container-image-border">

  <img alt="example" src="https://via.placeholder.com/150x250">

</div>

还有另一种方法可以实现这一目标吗?

Is there an other way to achieve this ?

推荐答案

您甚至不需要用<div>包装<img>元素:使用box-shadow可以解决问题:

You don't even need to wrap your <img> elements with <div>: using box-shadow will do the trick:

img {
  box-shadow: -10px 10px 0 0 #fd9220;
  margin: 20px;
}

<img alt="example" src="https://via.placeholder.com/150x250">
<img alt="example" src="https://via.placeholder.com/250x150">
<img alt="example" src="https://via.placeholder.com/150x150">

使用<div>包装的问题在于，默认情况下，它是一个块级元素，并且宽度为100%，除非另有说明.由于图像的大小不确定，因此很难将其收缩"包裹在<img>元素周围.

The problem with wrapping using a <div> is that it is a block-level element by default, and has a width of 100% unless otherwise specified. This makes it difficult to "shrink wrap" the element around your <img> element, since your image has an undetermined size.

这篇关于定位偏移div/图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！