https://www.jb51.net/css/660677.html
多くの場合、このようなシナリオでは、我々は、コンテナの絵の適応サイズを聞かせする必要があります。
1、imgタグの道
我々は、100％のああに設定され、幅、高さと考えることができるでしょう。カザフの効果を見てください。
|
1
2
3
|
<
div
class
=
'div1'
>
<
img
src
=
"./peiqi.png"
alt
=
""
>
</
div
>
|
|
1
2
3
4
5
6
7
8
9
10
11
|
.div
1
{
width
:
500px
;
height
:
400px
;
border
:
1px
solid
black
;
}
.div
1
img {
/*
width: 100%;
height:100%;
*/
}
|
これは、通常のペイジ（画像は容器よりも大きければ、次に画像がコンテナを超える）であります
|
1
2
3
4
5
6
7
8
9
|
.div
1
{
width
:
500px
;
height
:
400px
;
border
:
1px
solid
black
;
}
.div
1
img {
width
:
100%
;
height
:
100%
;
}
|
これは、ペイジの100％
額、ちょうど過去年かのように。
適応の要件に沿っているが、しかし見た画像が歪んでいるように。コンテナの場合よりも小さく、この画像ピクチャの適応力は、その後、画像が歪んでいます。その上にドラフト設計開発に応じて1枚の画像（ロゴ、プレースホルダチャートなど）の場合。しかし、状況は、多くの場合、それは水平方向と垂直方向の中央に、通常この時間は、コンテナよりも少なくなります、不規則な画像を得るためのインタフェースに遭遇しました。
タスクを整理：
- 画像の幅と垂直容器未満の高さは、水平方向にセンタリングされたとき
- 完全な画像の幅と高さが容器よりも大きい場合、コンテナの幅又は高さのアスペクト比を維持
|
1
2
3
4
5
6
7
8
9
|
<
div
class
=
'div1'
>
<
img
src
=
"./peiqi.png"
alt
=
""
>
</
div
>
<
div
class
=
'div1'
>
<
img
src
=
"./peiqi2.png"
alt
=
""
>
</
div
>
<
div
class
=
'div1'
>
<
img
src
=
"./peiqi4.jpeg"
alt
=
""
>
</
div
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.div
1
{
width
:
500px
;
height
:
400px
;
border
:
1px
solid
black
;
display
:
table-cell
;
vertical-align
:
middle
;
}
.div
1
img {
max-width
:
100%
;
max-height
:
100%
;
display
:
block
;
margin
:
auto
;
}
|
この属性の最大の高さの設定値は、heightプロパティは、最大高さよりも大きくなる防ぎます。
MAX-height属性が与えられた要素の最大の高さを設定するために使用されている。高さプロパティ設定の高さは属性よりも大きく設定した場合、height属性は失敗します。
この効果は、はるかに快適です
図2に示すように、図の背景の実施形態
|
1
2
3
|
.div {
background-
size
: contain;
}
|
背景サイズ：含む、完全コンテンツ領域の幅及び高さに適応するように、最大画像サイズに拡張します。背景サイズを使用してCSS：含む、特性は、画像の幅と高さを最適化することができるが、容器よりも小さいです。
コード
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
div {
height
:
400px
;
width
:
500px
;
border
:
1px
solid
black
;
background-repeat
:
no-repeat
;
background-
size
: contain;
background-position
:
center
;
}
.div
1
{
background-image
:
url
(./peiqi
1
.png);
}
.div
2
{
background-image
:
url
(./peiqi
2
.png);
}
.div
3
{
background-image
:
url
(./peiqi
4
.jpeg);
}
|
|
1
2
3
|
<
div
class
=
'div1'
></
div
>
<
div
class
=
'div2'
></
div
>
<
div
class
=
'div3'
></
div
>
|
最後に、もちろん我々は、製品の需要が大きな音の要件である参照する必要があります。
それはすべて、この記事のために、私たちは、私はあなたが家のスクリプトをサポートして願っています、学ぶために役立つことがしたいです。