html - 图像未针对 ipad 屏幕/iphone 模式调整大小

Question

谁能找到我的问题的解决方案？我一直在调整我的 CSS 表，但它似乎并没有改变任何东西。我对“4sites”图像使用与我的“关于”img 相同的规则。

这是该站点的链接，您也可以从那里看到我所有的 CSS 表。 https://dl.dropboxusercontent.com/u/146014194/483F_ss14/Pro01/hwk/pro01_content_structure_presentation_B02_responsive_4sites_FINAL.html

我知道你可以在一张 CSS 表中创建所有内容，但我的教授要求我们按原样制作..

我在 img 周围添加了一个 div 标签，以为我可以更好地控制它。但事实并非如此!

非常感谢!

Answer 1

您试图将图像的高度保持为 100%。如果这是响应式设计，则宽度必须为 100%，高度必须保持为自动

CSS:

#Mybio #Mepic img {
    clear: none;
    float: left;
    height: auto;
    width: 100%;
    margin-bottom: 100px;
    margin-top: 55px;
}

现在的问题是，图像占据了整个屏幕宽度，这很正常。您必须将父 div(id 限制为 #Mepic) 并使用针对不同屏幕尺寸的媒体查询来处理它。我还在您的网站上看到 float 问题。使用 Clear:both 清除它们。