私はfiddleを持っていますが、このimageのようにそのままコピーしようとしています。現時点では、画像に罫線を付けることができますが、何らかの理由で罫線左の高さを上げることができません。私はそれがCSSセレクターを介して行われるとは確信していますが、どうしたらよいかわかりません。私は、画像全体にボーダーを置くために使用しているCSSは次のとおりです。cssの枠線左の高さ
.helmet-image1
{
position: relative;
left: 20px;
border-left: 2px solid rgb(254, 91, 31);
border-right: 2px solid rgb(254, 91, 31);
border-top: 2px solid rgb(254, 91, 31);
}
のようなものを使用することができますコンテナの高さ
.container {
border-left: 2px solid rgb(254, 91, 31);
border-right: 2px solid rgb(254, 91, 31);
border-top: 2px solid rgb(254, 91, 31);
height: 400px;
display: inline-block;
}
.helmet-image1
{
position: relative;
left: 20px;
}
<div class="container">
<img class="helmet-image1"
src="https://s24.postimg.org/m3yekb9n9/i_Stock-516143705.png">
</div>
あなたが要素に画像をラップした場合、あなたは国境その偽物にその親要素の親と擬似要素に境界線を使用することができます親/画像とは異なる高さである。
あなたは、あなたのイメージの外にコンテナを置くことによってこの問題を解決し、設定ができ、高さを制御するためにbottomを使用するか、またはheightで下を交換し、height: calc(100% + 100px);
div
{
position: relative;
left: 20px;
border-right: 2px solid rgb(254, 91, 31);
border-top: 2px solid rgb(254, 91, 31);
display: inline-block;
}
img {
vertical-align: top;
}
div {
position: relative;
}
div::after{
position: absolute;
top: 0; left: 0; bottom: -100px;
width: 2px;
background: rgb(254,91,31);
content: '';
}<div>
<img class="helmet-image1" src="https://s24.postimg.org/m3yekb9n9/i_Stock-
516143705.png">
</div>divを使わずにdiv（画像クラスをdivに入れないで）を行うことはできますか？ –
いいえ、画像の一部が透明でないかぎり、境界線ではできません。疑似要素は画像では機能しないので、標準要素に適用する必要があります。 –
ニースのシャツブロンド。 –
あなたは最終的にimgタグにbox-shadowを使用することもできます。
img {
padding: 5px;/*optionnal */
vertical-align: top;/*optionnal */
box-shadow: -2px -2px rgb(254, 91, 31), 0 171px white, -2px 170px rgb(254, 91, 31), 2px -2px rgb(254, 91, 31), 2px -1px rgb(254, 91, 31), 0px -2px rgb(254, 91, 31);
border-radius: 5px 5px 0 0/*optionnal */
}
/* demo purpose for small snippet */
body {min-height:400px;}<img class="helmet-image1" src="https://s24.postimg.org/m3yekb9n9/i_Stock-
516143705.png">
<br/> text to test
あなたが境界線の高さとはどういう意味ですか？もっと説明してください –
これはあなたがやろうとしていることですか？ https://jsfiddle.net/9b7uaoj2/3/ –
@MichaelCokerはい、正確です。 –