Question

我已经编写了以下代码来自动调整DIV中的图像。它完全在JSFIDDLE中工作，但在我的博客http://roadroute.blogspot.in/2015/08/flipkart.html

中无效

请找到以下代码

＆＃13;

.responsive-container1 {
    position: relative;
    width: 250px;
    height: 415px;
    border: 1px solid red;
    margin-right: 10px; 
    margin-top:10px; 
    float: left; 
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    vertical-align: middle;
    display: inline-block;
}

＆＃13;

<div class="responsive-container1">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/01.jpg" alt="" />
    </div>
</div>
<div class="responsive-container1">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/02.png" alt="" />
    </div>
</div>
<div class="responsive-container1">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/03.jpg" alt="" />
    </div>
</div>

＆＃13;

请帮忙。

Answer 1

你应该删除以下css：

.dummy {
    padding-top: 100%;
}

.img-container {
    bottom: 0;
    font: 0px/0 a;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

且.post-body img已padding: 8px;将您的图片放在/显示在div之外。删除或删除图像max-width: 90%;。

它会为你做好准备。

修改

将text-align:center提交给.responsive-container1。

.responsive-container1 { border: 1px solid red; float: left; height: 415px; margin-right: 10px; margin-top: 10px; position: relative; text-align: center; width: 250px; }

最大宽度和高度90%并提供position和top值并同时提供transform。

.post-body img { background: #222222 none repeat scroll 0 0; border: 1px solid transparent; border-radius: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); max-height: 90%; max-width: 90%; padding: 8px; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }

它会起作用。

Answer 2

只需添加

宽度：100％;高度：100％;

在图像容器类中。

.responsive-container1 {
    position: relative;
    width: 250px;
    height: 415px;
    border: 1px solid red;
    margin-right: 10px; 
    margin-top:10px; 
    float: left; 
}

.dummy {
    padding-top: 100%;
    max-width:100%;
    max-height:100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align:center; /* Align center inline elements */
    font: 0/0 a;
    max-width:100%;
    max-height:100%;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    max-width:100%;
    max-height:100%;
}

.img-container img {
    width: 100%;
    height: 100%;
    margin: auto;
    vertical-align: middle;
    display: inline-block;
}

<div class="responsive-container1">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/01.jpg" alt=""/>
    </div>
</div>
<div class="responsive-container1">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/02.png" alt="" />
    </div>
</div>
<div class="responsive-container1">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/03.jpg" alt="" />
    </div>
</div>

DIV中的自动调整图像不适用于bloger

2 个答案: