我将此代码用于多篇文章,我认为它工作正常,除非我尝试通过添加样式position: relative
和id="target"
为文章中的一张图像添加一个特殊样式,但随后图像宽度缩小到 0 或它们消失,我不知道我在这里犯了什么样的错误。 请指教。
尝试删除position: relative
和id="target"
,看看代码是如何工作的。
即使有更好的方法来使用jQuery或JS来实现这个概念,请分享它。
.article {
border: 1px solid red;
padding: 0;
display: flex;
}
.article-content {
border: 1px solid black;
width: 46.66%;
text-align: left;
align-self: center;
margin-left: auto;
}
.img-control {
border:1px solid black;
max-width: 53.66%;
margin-right: auto;
margin-left: 1rem;
overflow: hidden;
}
.image {
width: auto;
width:100%;
}
.img-control img {
display: block;
max-width: 100%;
width: auto;
}
img #target {
transform: scale(2.2) translate(-35%, 29%) rotate(-25deg);
width: 670px;
display: block;
position: absolute;
}
@media only screen and (max-width:480px) {
.article {
flex-flow: wrap column;
}
.article-content, .img-control {
margin: 0 auto;
}
}
<div class="article">
<div class="article-content">
<h3 class="mainTitle">What is Lorem Ipsum?</h3>
<h5 class="subTitle">Lorem Ipsum</h5>
<p> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="img-control" style="position: relative;">
<div class="image">
<img src="http://via.placeholder.com/466x585" width="100%" alt="" style="width: 670px;right: -48px;top: -18px; display: block;position: absolute;" id="target" />
</div>
</div>
</div>
使用绝对定位,则需要具有位置:绝对或位置:相对的父容器。
此外,为了使元素占据其父元素的整个高度或宽度,您需要设置父元素的高度/宽度,然后将子元素的高度/宽度设置为 100%(父元素中的所有可用空间(。最初,您将图像高度设置为 670,因此它超过了每个 Mdn 的父元素块
百分比是指包含块的宽度
<style>
.article {
border: 1px solid red;
padding: 0;
display: flex;
}
.article-content {
border: 1px solid black;
width: 46.66%;
text-align: left;
align-self: center;
margin-left: auto;
}
.img-control {
border:1px solid black;
width: 20.66%;
height:156px;
margin-right: auto;
margin-left: 1rem;
overflow: hidden;
}
.image {
height:100%;
width:100%;
}
.img-control img {
display: block;
height:100%;
width:100%;
}
img#target {
transform: scale(2.2) translate(-35%, 29%) rotate(-25deg);
width: 670px;
display: block;
position: absolute;
}
@media only screen and (max-width:480px) {
.article {
flex-flow: wrap column;
}
.article-content, .img-control {
margin: 0 auto;
}
}
</style>
</head>
<body>
<div class="article">
<div class="article-content">
<h3 class="mainTitle">What is Lorem Ipsum?</h3>
<h5 class="subTitle">Lorem Ipsum</h5>
<p> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="img-control" style="position: relative;">
<div class="image">
<img src="http://via.placeholder.com/466x585" width="100%" alt="" style="top: -18px; display: block;position: absolute;" id="target" />
</div>
</div>
</div>
在这里工作小提琴
您的.img-control
会缩小,因为它的宽度未设置(width
和max-width
是不同的东西(。
另外img #target
应该在没有空间的情况下img#target
。正如img #target
的意思是"img元素中id='target'的元素",当img#target
的意思是"id='target'的img元素
并且请 aviod 内联样式,它们使您和其他人感到困惑。