具有CSS边距顶部和底部固定像素的响应式图像？

Question

我试过这个但是它不起作用..我希望图像按比例改变其大小，但是margin-top和margin-bottom要以像素为单位进行修复。

#imagenslide img {

    margin-top: 100px;
    margin-bottom: 100px!important;
    width: auto;
    height: auto;
    position: relative;

}

请帮忙吗？谢谢！

Answer 1

使用

#imagenslide img {

    margin-top: 100px;
    margin-bottom: 100px!important;
    width: 100%;
    height: auto;
    position: relative;

}

或者你也可以使用min-width css属性.. 也尝试使用％in width来响应..

Answer 2

我认为你很接近，但我认为它比你想象的更简单。尝试：

<img id="imagenslide"src="http://placehold.it/350x150">

#imagenslide { 
    margin: 100px 0;
    display: block;
    position: relative;
}

JSFiddle