- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我想将图片的高度增加到 400 像素。但是,图像不会在保持纵横比的同时填充 div。
我之前为图像添加了 height:100%,同时为父 div 添加了 400px 的固定高度,然后为图像添加了 object-fit: cover。但是,在调整页面大小时,图像不会保持其比例,而是会挤压/折叠。
任何帮助都会很棒。谢谢。
#test {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#test h2 {
font-family: 'Poppins';
text-transform: uppercase;
font-weight: 600;
font-size: 1.3em;
color: #333;
margin-bottom: 20px;
}
#picwrapper {
width: 85%;
}
@media only screen and (max-width: 986px) {
#picwrapper {
flex-direction: column;
}
}
#picwrapper {
display: flex;
flex-wrap: wrap;
}
.third {
width: 33.3333333333%;
position: relative;
}
@media only screen and (max-width: 986px) {
.third {
width: 100%;
}
}
.third img {
max-width: 100%;
height: auto;
display: block;
padding-top: 10%;
/* 4:3 Aspect Ratio */
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: linear-gradient(rgba(25, 25, 25, 0.9), rgba(25, 25, 25, 0.9));
}
.overlay-text {
font-family: 'Poppins';
font-weight: 500;
}
.third:hover .overlay {
opacity: 1;
}
.overlay-text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<section id="test">
<div id="picwrapper">
<div class="third">
<img src="https://cdn.zmescience.com/wp-
content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-_August_31.jpg">
<a href="AUDI/audi.html">
<div class="overlay">
<h1 class="overlay-text">Parkash Sandhu</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://solarsystem.nasa.gov/system/news_items/main_images/853_ph3_waxing_gibbous_2k.jpg">
<a href="#">
<div class="overlay">
<h1 class="overlay-text">Flo Music</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://cdn.zmescience.com/wp-content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-_August_31.jpg">
<a href="#">
<div class="overlay">
<h1 class="overlay-text">British Athletics</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://solarsystem.nasa.gov/system/news_items/main_images/853_ph3_waxing_gibbous_2k.jpg">
<a href="AUDI/audi.html">
<div class="overlay">
<h1 class="overlay-text">Audi</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://cdn.zmescience.com/wp-
content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-
_August_31.jpg">
<a href="Virgin Atlantic">
<div class="overlay">
<h1 class="overlay-text">Virgin Atlantic</h1>
</div>
</a>
</div>
</div>
</section>
最佳答案
在接下来的内容中,我将对您所追求的做出一些假设。
我假设您希望图像始终保持其纵横比 (4:3),但仍会随着屏幕的增大/缩小按比例缩放。
在下面,您会发现您的代码的另一种实现方式,但我认为它可以满足您的需求。至少,也许它会让您朝着正确的方向前进。
(顺便说一句,感谢 Andy Bell 的宽高比技术。请参阅此处:https://andy-bell.design/wrote/creating-an-aspect-ratio-css-utility/)
[class*="aspect-ratio-"] {
display: block;
position: relative;
width: 100%;
}
[class*="aspect-ratio-"] > * {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.aspect-ratio-tv {
padding-top: 75%; /* 4:3 */
}
.gallery {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
.gallery {
width: 100%;
}
.gallery li {
flex-basis: 100%;
}
@media screen and (min-width: 580px) {
.gallery li {
flex-basis: 50%;
}
}
@media screen and (min-width: 960px) {
.gallery li {
flex-basis: 33.33333%;
}
}
.gallery img {
object-fit: cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background: linear-gradient(rgba(25, 25, 25, 0.9), rgba(25, 25, 25, 0.9));
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.overlay-text {
color: white;
font-size: 20px;
text-decoration: none;
}
.overlay:hover {
opacity: 1;
text-decoration: none;
}
<ul class="gallery">
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/phvbkGThElM/800x600" alt="A neon ferris wheel" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/H_mTtLykvKs/800x682" alt="A dimly lit drum kit" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/Hc42xXu_WOg/800x567" alt="Blueberries, close up" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/MfynxC5_tiU/800x999" alt="High angle waterfall" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/7ZTx1iA7a7Q/800x397" alt="Sunset coastal scence" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
<li>
<div class="aspect-ratio-tv">
<img src="https://source.unsplash.com/pRvy1j4aINE/800x785" alt="High angle shot of a recording studio" loading="lazy" />
<a href="#0" class="overlay">
<h1 class="overlay-text">
TEST HEADING
</h1>
</a>
</div>
</li>
</ul>
关于html - 如何在保持图像纵横比的同时增加图像高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55660944/
我的应用程序包含两部分:网络部分和 GUI。它的工作方式有点像浏览器 - 用户从服务器请求一些信息,服务器发回一些代表某些 View 的数据,然后 GUI 显示它。 现在我已经将网络部分实现为一项服务
给定表达式字符串exp,编写程序检查exp中“{”、“}”、“(”、“)”、“[”、“]的对和顺序是否正确。 package main import ( "fmt" stack "gi
我想要一个简单的脚本在后台保持运行。目前看起来像这样: import keyboard while True: keyboard.wait('q') keyboard.send('ct
我维护着许多 RedHat Enterprise Linux(7 台和 8 台)服务器(>100 台),其中包含不同的应用程序。为了保持理智,我当然会使用 Ansible 等工具,更重要的是,公共(p
我有一个 winforms 应用程序,它在网络服务请求期间被锁定 我已经尝试使用 doEvents 来保持应用程序解锁,但它仍然不够响应, 我怎样才能绕过这个锁定,让应用程序始终响应? 最佳答案 最好
我正在努力在我的项目中获得并保持领先的 0。以下是当前相关的代码: Dim jobNum As String jobNum = Left(r1.Cells(1, 1), 6) r2.Cells(1
我正在尝试在我的 Canvas 中定位元素相对于我的背景。 窗口被重新调整大小,保持纵横比。 背景随着窗口大小而拉伸(stretch)。 问题是一旦重新调整窗口大小,元素位置就会不正确。如果窗口的大小
一直在玩弄 Hibernate 和 PostgreSQL,试图让它按预期工作。 但是由于某种原因,当我尝试将具有@OneToMany 关系的对象与集合中的多个项目保持一致时,除了第一个项目之外,所有项
我想将某些东西提交到 github 存储库,但我(显然)没有任何权利这样做。我对那个 repo 做了一个分支,提交了我的更改并提交了一个 pull-request。 现在,问题是过了一段时间其他人已经
这是一个初学者问题,我仍在考虑“在 OOP 中”,所以如果我错过了手册中的答案或者答案很明显,我深表歉意。 假设我们有一个抽象类型, abstract type My_Abstract_type en
我们正在开展的一些项目在 jQuery 1.4.2 或更早版本中有着深厚的根基,介于缺乏最新版本的性能优势(或语法糖)、使用现已弃用的方法的耻辱以及部署一个积极维护的库的 3 年以上旧版本,升级现在迫
我看到在FMDB 2.0中,作者为线程添加了FMDatabaseQueue。例子是: // First, make your queue. FMDatabaseQueue *queue = [FMDa
我在 NSScrollView 中有一个 NSTableView。 NSTableView 的内容是通过绑定(bind)到 NSArrayController 来提供的,而 NSArrayContro
我在 TreeView 上有一个节点,我手动填充该节点并希望保持排序。通过用户交互,TreeViewItem 上的标题可能会更改,它们应该移动到列表中的适当位置。 我遍历一个 foreach,创建多个
我从主 NSWindow 打开一个 NSWindow。 DropHereWindowController *dropHereWindowController = [[DropHereWindowCon
我需要放置一个 form 3 按钮,当我单击该按钮时,将其显示为按下,其他按钮向上,当我单击另一个按钮时,它应该为“向下”,其他按钮应为“向上” 最佳答案 所有按钮的属性“Groupindex”必须设
我有一个使用 AnyEvent::MQTT 订阅消息队列的 perl 脚本。 目前我想要它做的就是在收到消息时打印出来。我对 perl 完全陌生,所以我正在使用它附带的演示代码,其中包括将 STDIN
如何在 .NET 应用程序中保持 TreeView 控件的滚动位置?例如,我有一个树形 View 控件,并经历了一个向其添加各种节点的过程,并将它们固定在底部。在此过程中,我可以滚动浏览 TreeVi
我维护了大量的 vbscripts,用于在我的网络上执行各种启动脚本,并且有一些我在几乎所有脚本中使用的函数。 除了复制和粘贴之外,有没有人对我如何创建可重用 vbscript 代码库有建议。我并不反
我有一些关于 Azure 自托管的问题。 假设用户 Alex 在物理机 M 上设置了 Windows 自托管代理。当 Alex 注销且计算机进入休眠状态时,代理将脱机。现在,当 Bob 登录同一台计算
我是一名优秀的程序员,十分优秀!