周囲のdiv内にイメージを中央に配置したい。この画像は強制的なサイズであるが、伸張しないでください。したがって、divコンテナが100px * 100pxで、画像200px * 200pxの場合は、50pxを各側で切り取る必要があります。ストレッチなしの強制サイズの中央画像
this questionでは、サイズを強制する方法を読むことができます。しかし、私は左下の画像を開始するのではなく、中央に置くことを望んでいます。これは質問です:)
これは、それがどのようにある：
そして、これは私がそれになりたい方法です：
画像にマイナスの余白を付けます。この例では、margin-left:-50pxです。
編集：または画像の幅が分からない場合は、画像をdivの背景として使用できます。
<div style="margin:0 auto; width:100px; height:100px; border:2px solid black;
background:url(yourimagehere) 50% 0 no-repeat">
</div>
これは、コンテナの向きが画像の向き（縦/横）と一致しない場合でも機能します。 zoom(0.1)とmin-width/height:1000%は、イメージのサイズがターゲットコンテナの最大サイズの10倍であれば動作しますが、どこかに線を描く必要があると思います：（http://jsfiddle.net/FYnCG/）。 アニメーションビットはテストに過ぎません。そうすれば、高さが制限要因になったときのスケーリング方法がわかります。
<DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100px;
height: 30px;
border: 1px solid black;
overflow:hidden;
position:relative;
transititon: width 5s, height 8s;
}
.container img {
position: absolute;
left:-10000%; right: -10000%;
top: -10000%; bottom: -10000%;
margin: auto auto;
min-width: 1000%;
min-height: 1000%;
-webkit-transform:scale(0.1);
transform: scale(0.1);
}
.container:hover {
width: 800px;
height: 800px;
transition: width 5s, height 8s;
}
</style>
</head>
<body>
<div class="container">
<img
src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"
/>
<!-- 366x200 -->
</div>
</body>
</html>
私は余白を設定すると、画像。これは私が持っていないものです、すべての画像は個々のサイズを持っています。また、マージン値はすべての単一イメージに対して計算する必要があります。 – caw
Hm。あなたはdivの背景として画像を使用できませんか？ CSSを使用すると、div内の任意の場所に背景を配置できます。待って、私の答えを編集します。 –
ああ、それは私のせいです。あなたの答えは今、完璧なものと思われます。しかし、それは私のためには機能しません - 私はあなたにすべての情報を与えていないためです。あなたの答えは質問には完璧です。しかし、イメージがHTMLでサイズ変更されたとは言いませんでした。実際の幅が200のとき、サイズ変更する
caw