html - 根据其中的@media 删除或调整不同 div 的图像大小？

标签 html css image media-queries

所以我设法弄清楚如何使用@media 来更改我网站的宽度，但按钮图像变得非常小，我想更改网站部分内容的大小。 我想出了如何将网站上的所有图像更改为更大的图像尺寸，但这有点让事情看起来不合适!

@media only screen and (max-device-width: 480px) {
img {
    width: 65px;
    height: 65px;
}
}

所以如果我只想将容器 div 图像更改为特定的高度/宽度，我应该怎么做？ 您还可以更改甚至与 div 无关的图像，例如使用这些 @media 的 html 中的单个图像吗？ 我问的最后一件事是，您可以使用@media 使图像消失吗？ 我已经在网上搜索了一段时间的答案，但无法弄清楚!!!任何帮助将不胜感激:)谢谢 如果需要的话，这是我网站的代码吗？ 我的网站是 www.lawrencetrigg.tk 欢呼男孩和女孩! 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lawrence Trigg</title>
<link rel="images/favicon.ico" href="images/favicon.ico">
<style type="text/css">




a:-webkit-any-link{
text-decoration:none !important;
}
body {
	background-color: black;
}
#top {
   position: absolute;
    top: 0px;
    background-image: url("images/background-top-one.jpg");
    background-repeat: repeat-x;
    left: 0;
    right: 0;
    width: 750px;
    height: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

}
#bottom1 {
   position: fixed;
    background-image: url("images/background-bottom-one.jpg");
    bottom: 0px;
    left: 0;
    right: 0;
    width: 750px;
    height: 150px;
    color: black;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
 
}

div.transbox {
font-size: 16px;

  margin: 30px;
  background-color: #AAAAAA;
  border: 1px solid black;
  opacity: 0.7;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
 div.col-middle-one {
	float: left;
	width: 100%;
	font-size: 20px;
	padding: 1px;

	height: 250px;

	
	border-color: white;
	color: white;
	top: 50px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
	top: 0px;
}


li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}


a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
    z-index:10;display:none; padding:14px 20px;
    margin-top:60px; margin-left:-160px;
    width:300px; line-height:16px;
}
a.tooltip:hover span{
    display:inline; position:absolute; 
    border:2px solid #FFF;  color:#EEE;
    background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
    
/*CSS3 extras*/
a.tooltip span
{
    border-radius:2px;        
    box-shadow: 0px 0px 8px 4px #666;
    /*opacity: 0.8;*/
}


@media screen and (max-width:850px) {
	
	#top {
    position: absolute;
    top: 0px;
    background-image: url("images/background-top-one.jpg");
    background-repeat: repeat-x;

    width: 100%;
    height: 100%;
    text-align: center;

}
#bottom1 {
    position: fixed;
    background-image: url("images/background-bottom-one.jpg");
    bottom: 0px;
    width: 100%;
    height: 150px;
    color: black;
    text-align: center;
 
}
}
@media only screen and (max-device-width: 480px) {
img {
    width: 65px;
    height: 65px;
}
	#top {
    position: absolute;
    top: 0px;
    background-image: url("images/background-top-one.jpg");
    background-repeat: repeat-x;
font-size: 25px;
    width: 100%;
    height: 100%;
    text-align: center;

}
#bottom1 {
    position: fixed;
    background-image: url("images/background-bottom-one.jpg");
    bottom: 0px;
    width: 100%;
    height: 250px;
    color: black;
    text-align: center;
 
 
}
div.transbox {
font-size: 25px;

  margin: 30px;
  background-color: #AAAAAA;
  border: 1px solid black;
  opacity: 0.7;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

}


</style>
</head>

<body>
<div id="top">

<div class="col-top-one">
<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="education.html">Education</a></li>
  <li><a href="#skills.html">Skills</a></li>
  <li><a href="#work.html">Work</a></li>
  <li><a href="#gym.html">Gym</a></li>
  <li><a href="images/cv/lawrencecv2016.docx">Download CV</a></li>
  
  <a href="https://www.facebook.com/Lawrencetrigg" class="tooltip">
    <img src="images/icons/social-facebook32.png" onmouseover="this.src='images/icons/social-facebook322.png'" onmouseout="this.src='images/icons/social-facebook32.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/social-facebook32.png" style="float:right;" />
        <strong>Facebook</strong><br />

    </span>
</a>
  <a href="https://www.steam.com" class="tooltip">
    <img src="images/icons/social-steam32.png" onmouseover="this.src='images/icons/social-steam322.png'" onmouseout="this.src='images/icons/social-steam32.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/social-steam32.png" style="float:right;" />
        <strong>Steam</strong><br />

    </span>
</a>
 <a href="https://www.youtube.com" class="tooltip">
    <img src="images/icons/social-youtube32.png" onmouseover="this.src='images/icons/social-youtube322.png'" onmouseout="this.src='images/icons/social-youtube32.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/social-youtube32.png" style="float:right;" />
        <strong>Youtube</strong><br />

    </span>
</a>
 <a href="https://www.dropbox.com" class="tooltip">
    <img src="images/icons/social-dropbox32.png" onmouseover="this.src='images/icons/social-dropbox322.png'" onmouseout="this.src='images/icons/social-dropbox32.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/social-dropbox32.png" style="float:right;" />
        <strong>Dropbox</strong><br />

    </span>
</a>
 <a href="https://www.skype.com" class="tooltip">
    <img src="images/icons/social-skype32.png" onmouseover="this.src='images/icons/social-skype322.png'" onmouseout="this.src='images/icons/social-skype32.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/social-skype32.png" style="float:right;" />
        <strong>Skype</strong><br />

    </span>
</a>
  <a href="https://www.google.com" class="tooltip">
    <img src="images/icons/social-googleplus32.png" onmouseover="this.src='images/icons/social-googleplus322.png'" onmouseout="this.src='images/icons/social-googleplus32.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/social-googleplus32.png" style="float:right;" />
        <strong>Google Plus</strong><br />

    </span>
</a>


</ul>
<div class="col-middle-one">



 <div class="transbox">
    <p>Lawrence William Trigg</p>
 <p>I am a bright, young and ambitious individual who is self-motivated and organised. I can work well under pressure and am able to meet targets and deadlines, I am eager to learn new skills and feel the ones currently gained give a vast and varied history to draw from and implement in new situations. Working well within a team is something I enjoy, however I am also capable of working under my own initiative. </p>
 </div>
<div class="transbox">
    <p>Under Construction</p>
 
 </div>
 </div> 

</div>
<div id="bottom1">
<a href="#" class="tooltip">
    <img src="images/icons/icon-mobile1.png" onmouseover="this.src='images/icons/icon-mobile2.png'" onmouseout="this.src='images/icons/icon-mobile1.png'" />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-mobile1.png" style="float:right;" />
        <strong>Mobile Number</strong><br />
        0481718550
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-email1.png" onmouseover="this.src='images/icons/icon-email2.png'" onmouseout="this.src='images/icons/icon-email1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-email1.png" style="float:right;" />
        <strong>Email Address</strong><br />
        lawrencetrigg@me.com
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-picture1.png" onmouseover="this.src='images/icons/icon-picture2.png'" onmouseout="this.src='images/icons/icon-picture1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-picture1.png" style="float:right;" />
        <strong>Name</strong><br />
        Lawrence Trigg
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-home1.png" onmouseover="this.src='images/icons/icon-home2.png'" onmouseout="this.src='images/icons/icon-home1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-home1.png" style="float:right;" />
        <strong>Test</strong><br />
     Home
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-favorite1.png" onmouseover="this.src='images/icons/icon-favorite2.png'" onmouseout="this.src='images/icons/icon-favorite1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-favorite1.png" style="float:right;" />
        <strong>Test</strong><br />
     Favorite
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-website1.png" onmouseover="this.src='images/icons/icon-website2.png'" onmouseout="this.src='images/icons/icon-website1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-website1.png" style="float:right;" />
        <strong>Website</strong><br />
     http://lawrencetrigg.tk/
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-dob1.png" onmouseover="this.src='images/icons/icon-dob2.png'" onmouseout="this.src='images/icons/icon-dob1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-dob1.png" style="float:right;" />
        <strong>Date Of Birth</strong><br />
   8th May 1989 / 26 Years old
    </span>
</a>
<a href="#" class="tooltip">
    <img src="images/icons/icon-location1.png" onmouseover="this.src='images/icons/icon-location2.png'" onmouseout="this.src='images/icons/icon-location1.png'"  />
    <span>
        <img class="callout" src="images/callout_black.gif" />
        <img src="images/icons/icon-location1.png" style="float:right;" />
        <strong>Test</strong><br />
     Location
    </span>
</a>


</div>
</body>
</html>

最佳答案

您在 @media{...} 下添加的任何内容标签仅适用于指定的屏幕尺寸。例如，以下媒体 block 中提到的任何规则仅在 width of the screen is <= 480px 时才有效。 ，否则它不会工作。所以你可以隐藏，改变高度为特定的屏幕尺寸做其他事情:

@media only screen and (max-device-width: 480px){..}

(If I) wanted to change only the containers div images to a certain height/width, what should i do?

将它们添加到 @media 下标签

@media...//screen size{

.certain-image-class{
   //css rules here
}
}

Also can you change a image not even to do with a div, like a single image in the html using these @media ?

是的，就像上面那样。为图像分配 class或 id 

  @media...//screen size{

    .myImage{
       //css rules here
    }

    #myImage{
       //css rules here
    }
    }

last thing while im asking, can you make images disappear using @media?

是的，同上(使用类或Id)；图像不会显示在指定的屏幕尺寸上:

  @media...//screen size{

        .myImage{
          display:none;
        }

        #myImage{
         display:none;
        }
        }

关于html - 根据其中的@media 删除或调整不同 div 的图像大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36392836/

上一篇：html - 向上/向下滚动时菜单/顶部栏发生变化

下一篇：html - 字体不会改变，id 高度不会显示

相关文章：

html - 如何使用 CSS 对齐 HTML 表单元素的左边缘？

html - 清除和 div

javascript - 你如何正确比较javascript中的两个图像？

ios - 如果图像的外部边界 react native ，如何剪掉图像

html - Swift HTTP POST 请求登录

javascript - 有一个动态宽度的 div 始终在另一个 div 中居中

javascript - 引用其父父级定位绝对 div

css - 为什么我的 bootstrap.css 文件停止更新？

html - 全屏背景图像被拉伸(stretch)

c# - 将 32 位 bmp 转换为 24 位

©2024 IT工具网  联系我们