图片只能在 Chrome 中调整大小？

【问题标题】：Images only resize in Chrome?图片只能在 Chrome 中调整大小？
【发布时间】：2014-06-30 03:44:54
【问题描述】：

我有一组应该根据浏览器当前窗口大小调整大小的图像。这是由 CSS 属性设置的；

#photoframe {
    white-space:nowrap;
    height:50%;
    float:left;
    }

#photoframe img {
    height:100%;
    width:auto;
    }

现在这可以使用 chrome 而不是任何其他浏览器。

示例

Fiddle

这个例子在 chrome 中工作，完全符合我的需要，但是这个例子在 IE 或 Firefox 中不工作？

我的代码

有人可能会觉得这很有用。

完整的 HTML

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.css" rel="stylesheet" type="text/css">


</head>
<body>
<div id="title">
  <h1>Bass Clef Photography</h1>
</div>
<div id="tagline">Passion 4 Live Music &amp; Passion 4 Photography</div>
<div id="tabsContainer">
<div id="centerContainer">
 <div class='tab zero'>
      <ul>
        <li><a href="BassClef.html">Home</a></li>
      </ul>
  </div>
    <div class='tab one'>
      <ul>
        <li><a href="#">Music Gallery</a></li>
      </ul>
    </div>
    <div class='tab two'>
      <ul>
        <li><a href="#">About</a></li>
      </ul>
    </div>
    <div class='tab three'>
      <ul>
        <li><a href="#">Clients</a></li>
      </ul>
    </div>
    <div class='tab four'>
      <ul>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class='tab five'>
      <ul>
        <li><a href="members.php">Members</a></li>
      </ul>
    </div>
</div>
</div>


<div id="photoframeContainer">
  <div id="photoframe">
    <img src="uploads/picture01.jpg" alt="">
    <img src="uploads/picture02.jpg" alt="">
    <img src="uploads/picture03.jpg" alt="">
    <img src="uploads/picture04.jpg" alt="">
    <img src="uploads/picture05.jpg" alt="">
    <img src="uploads/picture06.jpg" alt="">
    <img src="uploads/picture07.jpg" alt="">
    <img src="uploads/picture08.jpg" alt="">
  </div>


</div>




</body>
</html>

完整的 CSS

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width: 100%;
}
body, html{
    width: 100%;
    background-color:#424242;
    overflow-y: hidden;
    overflow-x: hidden;
    margin: 0;



}

H1{
margin:0;   
}
/*
    Dreamweaver Fluid Grid Properties
    ----------------------------------
    dw-num-cols-mobile:     5;
    dw-num-cols-tablet:     8;
    dw-num-cols-desktop:    10;
    dw-gutter-percentage:   25;

    Inspiration from "Responsive Web Design" by Ethan Marcotte 
    http://www.alistapart.com/articles/responsive-web-design

    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

#tabsContainer {
    clear: both;
    display: block;
    top: 240px;
    width: auto;
    margin-top: 0;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 0px;
    width: 100%;
    height: 300px;

}
#centerContainer {
    width: 230px;
    height: 280px;
    clear: none;
    display: block;
    margin: 0 auto;
}
#tabsContainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 24px;
}
#tabsContainer ul li {
    display: inline;
    margin: 0px;
    display: block;
    text-decoration: none;
    text-align: center;
    line-height: 30px;
    font-size: 24px;
}
#tabsContainer ul li a {
    display: block;
    float: left;
    padding: 17px 15px 0 15px;
    font: bold 12px Arial;
    color: #000;
    text-decoration: none;
    font-size: 24px;
    width: 200px;
}
#tabsContainer ul li a:hover {
    color: #d3701e;
    font-size: 24px;
}
#tabsContainer ul li #active a {
    color: #d3701e;
    background: url(images/navigation-hover.png) repeat-x left top;
}
.tab {
    float: left;
    font-size: 24px;
    clear: both;
}
.tab.one {
    width: 220px auto;
    font-size: 24px;
    white-space: nowrap;
}
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#title {
    clear: both;
    float: left;

    top:0;
    margin-left: 0;
    width: 100%;
    display: block;
    font-size: xx-large;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
}
#tagline {
    clear: both;
    float: left;
    top:100px;
    margin-left: 0;
    margin-top: 0;
    width: 100%;
    display: block;
    font-size: x-large;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
    color: #d3701e;
}

#photoframeContainer{

    bottom:0px;


}
#photoframe {
    white-space:nowrap;
    height:50%;
    float:left;
    overflow-x:auto;
    overflow-y: hidden;

    }

#photoframe img {
    height:70%;
    width:auto;
    /*max-width:100%;
    min-width:100px;*/
}




/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */


@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#title {
    clear: both;
    float: left;
    top:0px;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: center;
    white-space:nowrap;
}
#tagline {
    clear: both;
    float: left;
    top:140px;
    margin-top: 0;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: center;
}
#tabsContainer {
    float: left;
    width: 100%;
    display: block;
    height: 200px;
    top:200px;

}
#centerContainer {
    width: 460px;
    height: 150px;
    clear: none;
    display: block;
    margin: 0 auto;
}
#tabsContainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 24px;
}
#tabsContainer ul li {
    display: inline;
    margin: 0px;
    display: block;
    text-align: center;
    line-height: 30px;
    font-size: 24px;
}
#tabsContainer ul li a {
    display: block;
    float: left;
    padding: 17px 15px 0 15px;
    font: bold 12px Arial;
    color: #000;
    text-decoration: none;
    font-size: 24px;
}
#tabsContainer ul li a:hover {
    color: #d3701e;
    font-size: 24px;
}
#tabsContainer ul li #active a {
    color: #d3701e;
    background: url(images/navigation-hover.png) repeat-x left top;
}
.tab {
    float: left;
    font-size: 24px;
    clear: none;
}
.tab.one {
    width: 220px auto;
    font-size: 24px;
}
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#title {
    clear: both;
    float: left;
    top:0px;

    width: 100%;
    display: block;
    text-align: center;
}
#tagline {
    clear: both;
    float: left;
    top:130px;

    width: 100%;
    display: block;
    text-align: center;
}
#tabsContainer {
    clear: both;
    float: left;
    top: 160px;

    width: 100%;
    display: block;
    height: auto;
    text-align: center;


}
#centerContainer {
    width: 800px;
    height: auto;
    clear: both;
    display: block;
    margin: 0 auto;
}
#tabsContainer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 24px;
}
#tabsContainer ul li {
    display: inline;
    margin: 0px;
    display: block;
    text-align: center;
    line-height: 30px;
    font-size: 24px;
}
#tabsContainer ul li a {
    display: block;
    float: left;
    padding: 17px 15px 0 15px;
    font: bold 12px Arial;
    color: #000;
    text-decoration: none;
    font-size: 24px;
    width: auto;
}
#tabsContainer ul li a:hover {
    color: #d3701e;
    font-size: 24px;
}
#tabsContainer ul li #active a {
    color: #d3701e;
    background: url(images/navigation-hover.png) repeat-x left top;
}
.tab {
    float: left;
    font-size: 24px;
    clear: none;
}
.tab.one {
    width: 190px;
    font-size: 24px;
    white-space: nowrap;
}
}

【问题讨论】：

  • 内联元素没有宽度和高度，它由内容决定。默认情况下，图像是内联的。 chrome 会做“不错”的事情，比如显示带有块子级的内联元素，或者带有高度和宽度的内联元素，就好像它们是内联块一样。尝试制作你的图片display:inline-block;，看看效果是否更好
  • @chiliNUT，不幸的是它没有任何区别。

标签： html css image cross-browser responsive-design


【解决方案1】：

你试过用 vw i vh 吗？

vw 是查看宽度，vh 是查看高度。它类似于百分比，但它始终取决于用户正在使用的屏幕。宽度：50vw；相当于查看宽度的 50%。

当您将其应用于图像时，它们将根据屏幕宽度而不是父 div 调整大小，所以也许它对您有用。

抱歉，一开始回答太短了。

【讨论】：

  • 好吧，我看看这个。谢谢。
猜你喜欢
  • 2019-10-09
  • 1970-01-01
  • 2017-09-19
  • 2013-09-20
  • 2021-05-07
  • 2020-07-04
  • 1970-01-01
  • 1970-01-01
  • 2012-02-22
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode