Question

当我用自己的图像替换主题图像thumb-1.jpg时，我的图像不会自动重新调整大小以适应空间。我的图像显示的是主题图像的两倍。

我使用什么自定义CSS将图像更改为与主题图像相同的尺寸，以便我的图像适合空间？

我购买的主题：http://themeforest.net/item/grepfrut-responsive-software-html-template/3215883

HTML

            <h4 class="heading-icon clearfix"><img src="img/icons/heading-icon-1.png" width="40" height="40" alt="icon" class="icon-small-bg"> Three easy steps.</h4>

            <!--carousel list starts-->
            <div id="carousel" class="es-carousel-wrapper">
                <div class="es-carousel">
                    <ul>
                        <li>
                            <div class="folio-thumb"><img src="img/preview/thumb-1.jpg" alt="image" /> <a href="img/preview/thumb-1.jpg" data-rel="prettyPhoto[gallery1]" title="This is title of Image" class="icon-zoom"></a></div>
                            <h5>......</h5>
                            <p>...... </p>
                        </li>
                        <li>
                            <div class="folio-thumb"><img src="img/preview/thumb-2.jpg" alt="image" /> <a href="img/preview/thumb-2.jpg" data-rel="prettyPhoto[gallery1]" title="This is title of Image" class="icon-zoom"></a></div>
                            <h5>.... </h5>
                            <p> .....</p>
                        </li>
                        <li>
                            <div class="folio-thumb"><img src="img/preview/thumb-3.jpg" alt="image" /> <a href="img/preview/thumb-3.jpg" data-rel="prettyPhoto[gallery1]" title="This is title of Image" class="icon-zoom"></a></div>
                            <h5>....</h5>
                            <p> ......</p>
                        </li>

                        </li>
                    </ul>
                </div>
            </div>
            <!--carousel list ends-->

CSS

.folio-thumb {
margin-bottom: 10px;
display:inline-block;
position:relative;}

.icon-zoom {
background: url(../img/zoom.png) no-repeat 0 0;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
z-index: 9;
outline: none;}



.icon-zoom:hover {
background-position: 0 -100px;}

Answer 1

为什么不在CSS中使用img general标签。类似的东西：

.folio-thumb img{
  width: 100px;
  height: 100px;
}

Answer 2

假设您的图像具有相同的比例，我建议将图像包装设置为视网膜显示和响应性。通过这种方式，它可以根据它的容器和压缩等方式保持其形状。a fiddle

HTML

<div class="your-box">
    <img src="http://placehold.it/400x400" alt="" />
</div>

CSS

.your-box {
    max-width: 200px;
}

.your-box img {
    display: block;
    width: 100%;
    height: auto;
}

在你的情况下，我实际上会创建一个.image-w的全局类，然后你可以像这样使用那个站点范围。任何你想成为一个响应式图像的东西，只需把这个类作为基础。

<div class="image-w folio-thumb">
    <img src="http://placehold.it/400x400" alt="" />
</div>

.image-w img {
    display: block;
    width: 100%;
    height: auto;
}

如何使用css自动重新调整div中的图像大小？

2 个答案:

HTML

CSS