0

幅と高さが不明なdiv内の画像を取得しています。最大の幅または高さの画像が欲しい-のようなものbackground-size: contain。

これが私のソースコードです：

CSS

.box {
    display: block;
    position: fixed;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-right: 80px;
    margin-left: 80px;
    background-color: white;
    border: solid 2px blue;
}

.box img {
    max-width: 100%;
    max-height: 100%; 
}

HTML

<div class="box">
<img src="myimage.jpg">
</div>

Max-widthは正常に機能していますが、max-heightは機能しません。

4

1 に答える 1

1

What you want is not possible with only CSS.

There are JS plug-ins out there to make this for you. Look for imgscale it's a jQuery plugin for this matter and, although it needs some adjustments, have a great base to begin with.

here is a link of one copy I've modified: http://www.dtavares.com/imgscale/js/jquey.imgscale.js

You can call it as:

 $(".someConainer img").imgscale({parent: '.someConainer', scale: 'fit', center: true, fade: 0});
于 2013-02-02T15:47:59.760 に答える