css - 为什么我不能将此图像调整为原始大小

Question

我有一张图片，不允许我调整它的大小。

这是响应者网站上的图片 [链接] ( http://www.responsinator.com/?url=http%3A%2F%2Fsandbox.kevinw.me%2Fwilliams%2Fshare.html )

我需要它来匹配此处[链接] ( http://www.responsinator.com/?url=sandbox.kevinw.me%2Fshare%2Fshare.html ) 上的图片

这是 html 有一个视频链接，您可以看到。

<div id="iphone" class="image">
            <!-- Start VideoLightBox.com BODY section -->
            <div class="videogallery">
                <a class="disabled" href="vdbplayer364e.swf?volume=100&amp;url=video/instagram.mp4" title="Instagram"><img id="iphone" src="img/instagramiphonephone.jpg" class="image" /><span><a class="voverlay" href="vdbplayer.swf?volume=100&url=video/instagram.mp4" title="Instagram"><img id="play_button1" src="img/instagramplaybutton.png" class="image"></a></span></a>
                <span class="videolb"><a class="videolb" href="http://videolightbox.com/">Video in Popup</a> by VideoLightBox.com v2.8m</span>
            </div>
            <script src="js/jquery.tools.min.js" type="text/javascript"></script>
            <script src="js/videolightbox.js" type="text/javascript"></script>
            <!-- End VideoLightBox.com BODY section -->
        </div>

这是我的代码

#iphone {
    width: 256px;
    margin-top: 111px;
    margin-left: auto;
    clear: none;
    margin-right: auto;
    float: none;
    padding-top: 13.2%;
    padding-left: 2.8%;
    padding-right: 2.8%;
    padding-bottom: 0%;
}

Answer 1

使用下面的 CSS，我认为这完全可以解决您的图像调整大小问题:

CSS

@media only screen and (max-width: 768px)    
#iphone1 {                       /******share.css Line:1568***********/
max-width: 256px;
margin-top: 111px;
/* margin-left: -14% !important; */
clear: none;
margin-left: auto;
margin-right: auto;
float: none;
/* padding-top: 34.2%; */
/* padding-left: 2.8%; */
/* padding-right: 2.8%; */
/* padding-bottom: 0%; */
}

@media only screen and (max-width: 360px) 
#iphone {                                  /******share.css Line:2316***********/
height: 68%;
padding-top: 48.2%;
/* padding-left: 4.4%; */
/* padding-right: 9.4%; */
padding-bottom: 7.4%;
}