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

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

转载作者：行者123 更新时间：2023-11-28 06:06:52

所以我设法弄清楚如何使用@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/

文章推荐： ios - SKProductsRequest 在 AppStore 构建中返回零产品

文章推荐： javascript - Angular 2 使用指令防止输入和模型更改

文章推荐： c++ - C++运算符的继承

iPhone:删除/删除 SQLite 数据库？
我知道如何通过iPhone开发创建sqlite数据库、向其中插入数据、删除行等，但我试图以编程方式删除整个数据库本身，但没有得到任何帮助。请有人指导我如何通过代码从设备中删除/删除整个 sqlite
teradata - 删除/删除 Teradata 中的数据库
请帮助指导如何在 Teradata 中删除数据库。当我运行命令DROP DATABASE database_name时，我收到错误消息: *** Failure 3552 Cannot DROP d
azure - 删除/删除 Azure 警报规则
Azure 警报规则的删除命令似乎不起作用，尝试了下面的方法，它返回状态为无内容，并且警报未被删除使用的命令Remove-AzAlertRule -ResourceGroup "RGName"-Na
elasticsearch - Elasticsearch 数据丢失/删除/删除
我在 flex 搜索中为大约50000个视频建立了索引，但是当它达到52000左右时，所有数据都被删除。嗯，这对我来说真的很奇怪，我没有为ES设置任何Heap大小或最小或最大大小的内存大小，因此它们没
python - Django:删除/删除 slug
我正在处理的问题是表单错误“输入由字母、数字、下划线或连字符组成的有效‘slug’。” 以下是我的表单字段验证: def clean_slug(self): slug = self.c
jQuery 删除 : $ ("..."). 删除() 与 .remove ("...")
阅读文档，我希望 $("#wrap2").remove(".error") 从中删除所有 .error 元素#wrap2。然而看看这个 JSFiddle: http://jsfiddle.net/h
php - 删除/删除 laravel 项目
嗨，我第一次尝试发现 laravel 我从 laravel 4.2 开始，我刚刚创建了一个新项目，但我误以为我写了这样的命令行 composer create-project laravel/lara
Apache 2.4 - 删除 |删除 |卸载
我已经在网上搜索了很长一段时间，但我找不到如何完全删除 apache 2.4 。使用: Windows 7 c:\apache24\ 我已经尝试了所有命令，但没有任何效果。 httpd -k shu
python - 删除/删除 pandas DataFrame 中任意列中具有特定字符串的行
可能是一个简单的答案，所以提前道歉(最少的编码经验)。我正在尝试从任何列中删除具有特定字符串(经济 7)的任何行，并且一直在尝试离开此线程: How to drop rows from pandas
c++ - 删除/删除 vector 项的最有效/最快的方法
有几种方法可以删除/移除 vector 中的项目。我有一个指针 vector ，我需要在类的析构函数中删除所有指针。什么是最有效/最快甚至最安全的方式？ // 1º std::for_each(v
linux - 删除 xinetd 导致 plesk 删除
我安装了一个 VNC 服务器并在某处阅读了我必须安装 xinetd 的信息。稍后我决定删除 VNC 服务器，所以我也删除了 xinetd。似乎 xinetd 删除了一些与 plesk 相关的文件，如果
android - 如何完全杀死/删除/删除/停止 AsyncTask
我制作了一个从我们的服务器下载视频的应用。问题是: 当我取消下载时，我打电话: myAsyncTask.cancel(true) 我注意到，myAsyncTask 并没有在调用取消时停止...我的 P
machine-learning - 删除/删除 Vertica 中的机器学习模型(如果存在)
是否可以在使用DELETE_MODEL删除模型之前检查模型是否存在我试图避免在尝试删除尚未创建的模型时收到错误消息。基本上我正在寻找对应的: DROP TABLE IF EXISTS 但对于模型。最
php - 如何使用 php 删除/删除 mySQL 中的特定表行？
我已经有了这个代码: 但它仍然会生成一个表行条目。我想做的是，当输入的数量为0时，表行将被删除。请耐心等待，因为我是 php 和 mySQL 编码新手。最佳答案您忘记执行查询。应该是 $que
c# - 删除 EWS 中的 Exchange 事件修改/删除(即恢复事件)
在 SharePoint 中，如果您删除/修改重复日历条目的单次出现，则不会真正删除/修改任何内容 - 相反，会创建一个新条目，告诉 SP 对于特定日期，该事件不存在或具有新参数. 因此，这可以通过删
javascript - Laravel 5.2 & Dropzone.js - 删除(删除)上传的图片
在 routes.php 中我有以下路由: Route::post('dropzone', ['as' => 'dropzone.upload', 'uses' => 'AdminPhotoContr
Node.JS app.get 错误..无法获取/删除/删除/15
在我的应用程序中，我正在尝试删除产品。当我第一次删除产品时，它会成功并且 URL 更改为/remove_category/15。我正在渲染到同一页面。现在，当我尝试删除另一个产品时，网址更改为/rem
bash - 匹配后如何使用 BSD/OS X sed 删除/删除 X 行
这个问题被问了很多次，但给出的答案都是 GNU sed 特定的。 sed -i '' "/${FIND}/,+2d""$FILE" 给出“预期的上下文地址”错误。有人可以给我一个例子，说明如何使用
javascript - Google Maps JavaScript API V3 - 卸载/解构/删除/删除
在使用 V3 API 时，我找不到任何方法来删除和清理 Google map 。我已经在 AJAX 站点中运行它，所以我想完全关闭它而无需重新加载页面。我希望有一个 .unload() 或 .de
sql-server - 如何创建一个可以创建/更改/删除 View 但不能表、可以读取数据但不能插入/更新/删除/截断数据的 Azure SQL 数据库用户？
是否可以创建一个 Azure SQL 数据库用户来执行以下操作: 针对所有表和 View 进行 SELECT 创建/更改/删除 View 但用户不应该不拥有以下权限: 针对任何表或 View 插入/更

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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