WordPress和Twitter Bootstrap图像出现拉伸或最大宽度问题（100％无法正常工作）
使用Twitter Bootstrap v3.1.1, 我为客户端创建了自定义WordPress主题。一切都进行得很好, 直到我意识到在IE和Firefox中, 即使我设置了max-width：100％设置, 图像仍显示完整尺寸并超出其父元素的边界。
自然, 我在互联网上搜寻了一些选项, 有人提到将高度设置为：auto;
在img标签上。这几乎可行, 但是图像在某些地方开始被拉伸, 而在其他地方仍然没有遵循最大宽度。
这是边栏中的小部件中的图像不遵循最大宽度的示例：100％
文章图片
我搜寻了更多内容, 并且遇到了更多针对Firefox和IE的黑客。然后, Chrome也开始出现异常。现在, 我有一个凌乱的样式表, 其中包含大量CSS hack, 仍然存在图像被拉伸或显示完整尺寸的问题。建议之一是弄乱框大小, 并将img的宽度设置为100％, 这导致下面的图像小于拉伸的父容器的宽度。
文章图片
【WordPress和Twitter Bootstrap图像出现拉伸或最大宽度问题（100％无法正常工作）】我将回到绘图板上, 在这里我仅使用max-width：100％, 然后重新开始。
我的问题是：如何才能使WordPress上使用的所有图像正确运行并遵循max-width：100％CSS规则？这是一个响应迅速的网站, 我需要所有图像都保留在其容器中, 不要被拉伸或歪斜, 并且应随着浏览器大小的变化而在限制比例的同时增大/缩小。
#1 这不是因为Bootstrap和WordPress在一起-我们一直在使用它。你可以使用
img {height: auto;
max-width: 100%;
}
这样就可以使你的所有图像都具有响应性, 并可以将其容器填充到原始图像宽度的100％, 并调整高度以保持纵横比。
但是, 如果图像的容器为1000px, 并且图像的原始尺寸为500× 250, 则该图像将仅填充容器的一半, 因为max-width：100％将使图像的最大宽度为500px。
你可以使用
img {height: auto;
width: 100%;
}
这样可以确保你的图片充满整个容器。但请注意-在上述1000px容器/ 500px图像的情况下, 你的图像将放大并可能开始看起来像像素化。
需要注意的另一件事-你的图片可能会在小部件中被覆盖。例如, 一个流行的侧边栏图像小部件将宽度和高度硬编码为内联样式(这是一种可怕的做法, 我希望他们停止这样做)。你可以覆盖它, 并使其与：
img[style] {height: auto !important;
width: 100% !important;
} //or
.widget[style] img {height: auto !important;
width: 100% !important;
}
我愿意打赌, 你的侧边栏图像问题是某些样式(通过插件css或内联)会覆盖你的原始图像设置。
#2 因此, 这最终并不是特定于Bootstrap或WordPress。这是
- 我从谁知道{的位置复制了一种样式：display：inline-block; }
- 在所有元素上进行引导框大小调整
- WordPress在图像上使用width和height属性
我很高兴知道将来我可以使用Boostrap来帮助加快项目样式。谢谢大家的帮助！
推荐阅读
- WordPress的url_to_postid不适用于非默认的永久链接
- JAVA SE—— 异常
- #yyds干货盘点#SpringCloud技术专题「Gateway网关系列」微服务网关服务的Gateway全流程开发实践指南（2.2.X）
- featuretools完全指南-可自动构造机器学习特征的Python库
- #yyds干货盘点#CCNA学习记录5
- Docker 容器的使用和Dockerfile配置ssh服务
- （服务运维）Nginx初始化配置和多WEB实验
- -文件的归档和压缩
- Docker基础（安装Redis Cluster服务 #私藏项目实操分享#）