画像をサイズ変更するときに問題が発生しました。管理パネルで設定しました。私はしかし、ブラウザのサイズを変更する場合はCSSイメージのサイズ変更の問題
、それらはすべて一緒にシュリンク：
.users-list>li img {
border-radius: 50%;
max-width: 100%;
height: auto;
width: 100px;
height: 100px;
}
最大
は、画像が見栄えしている
をそして私はで試してみましたトリックを行うように見えるheight: 100pxプロパティを削除していますが、何らかの理由で1つのイメージがオフになっています：
は、あなたが一次元を突き止める必要があります削除して、autoなど他の次元を許可します。
しばらくwidthが一定に保たれる場合、以下の例を参照してください（これは画像の縦横比を維持）height自動調整する：
img {
display: block;
}
.correct,
.incorrect {
border: 1px solid red;
display: inline-block;
}
.incorrect img {
max-width: 100%;
width: 100px;
height: 100px;
}
.correct img {
max-width: 100%;
width: 200px;
height: auto;
}<div>This one stretches out:</div>
<div class="incorrect">
<img src="http://placehold.it/150x50" />
</div>
<div>This will preserve aspect ratio and look right:</div>
<div class="correct">
<img src="http://placehold.it/150x50" />
</div>がheightが保持される以下の例を参照してください一定の間はwidthは自動調整：
img {
display: block;
}
.correct,
.incorrect {
border: 1px solid red;
display: inline-block;
}
.incorrect img {
max-height: 100%;
height: 100px;
width: 100px;
}
.correct img {
max-height: 100%;
height: 200px;
width: auto;
}<div>This one stretches out:</div>
<div class="incorrect">
<img src="http://placehold.it/150x50" />
</div>
<div>This will preserve aspect ratio and look right:</div>
<div class="correct">
<img src="http://placehold.it/150x50" />
</div>これは多くの意味がある...私のフォーマットはそれが得られるほど良いです。バックエンドは、私が望むことをするために同じ次元の画像を取得する必要があります – Norgul
ちょうどあなたがあなたのイメージを伸ばしたくない場合は
height: 100px;
すなわち
.users-list>li img {
border-radius: 50%;
max-width: 100%;
height: auto;
width: 100px;
}
それは私に3番目の画像の結果を与える – Norgul
また<img>タグにheight属性を使用することができます。
`の最大高さを使用して任意のCSS
ことなくこの
<img src="/path/to/image" height="40">気に入り：100pxに、'と '最大幅：100pxに、'の代わりに '高さ：100pxに、'と '最大幅：100％;' ？ –幅：100％;高さ：自動; – devpro