个人中心
gpt4 book ai didi

html - CSS:两个 Logo 左右对齐，应通过窗口调整大小自动缩放

转载 作者：太空宇宙 更新时间：2023-11-04 02:24:18 25 4
gpt4 key购买 nike

我的网站上有两个 Logo ，应该放在我的网站顶部。
一个 Logo 应对齐左侧，第二个 Logo 应对齐右侧。
现在，当浏览器窗口变小时，这两个 Logo 之间的空间应该变窄，最终当两个 Logo “碰撞”彼此时，两者都应该在不破坏线的情况下缩小。

现在只有左边的标志缩小了，右边的标志打破了界限，被推低了，根本没有缩小。

有谁能够帮我？

我的 CSS:

.image-wrapper
{
 position: relative;
 white-space: nowrap;
}

.scale-image
{
 display: block;
 width: auto;
 max-width: 55%;
 white-space: nowrap;

}

这是我的 HTML 代码: 
<div class="image-wrapper">
<a href="#" ><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/Logo_oskar.jpg" align="left" class="scale-image"/></a>
<div />

<div class="image-wrapper">
<a href="#" target="_blank" ><img src="http://www.drogies-test.de/pics/Logo_theater_os.gif" align="right" class="scale-image"/></a>
<div />

示例链接: http://www.drogies-test.de/header_show.html

最佳答案

我已调整标记结构以正确嵌套元素。

.image-wrapper:first-of-type,.image-wrapper:nth-child(1) {
    float: left;
}

.image-wrapper:last-of-type,.image-wrapper:nth-child(2) {
    float: right;
}

.image-wrapper {
    max-width: 50%;
}

.scale-image {
    width: 100%;
    height: auto;
}
<body>
  <div class="image-wrapper">
    <a href="http://www.drogies-test.de/"><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/Logo_oskar.jpg" align="left" class="scale-image"></a>
  </div>
  <div class="image-wrapper">
    <a href="http://www.theater-osnabrueck.de/" target="_blank"><img src="http://www.drogies-test.de/pics/Logo_theater_os.gif" align="right" class="scale-image"></a>
   </div>
</body>


这是 flex解决方案: 

.image-wrapper {
    max-width: 50%;
}

.scale-image {
    width: 100%;
    height: auto;
}

.flex-wrapper {
    display: flex;
    justify-content: space-between;
}
<div class="flex-wrapper">
  <div class="image-wrapper">
    <a href="http://www.drogies-test.de/"><img src="http://www.drogies-test.de/wp-content/uploads/2016/05/Logo_oskar.jpg" align="left" class="scale-image"></a>
  </div>
  <div class="image-wrapper">
    <a href="http://www.theater-osnabrueck.de/" target="_blank"><img src="http://www.drogies-test.de/pics/Logo_theater_os.gif" align="right" class="scale-image"></a>
   </div>
</div>


请注意，IE 8 和 9 等旧版浏览器以及 Safari 和 Firefox 等一些旧版本的 webkit 浏览器不支持 flex(而是支持已弃用或混合语法变体)。

了解更多: caniuse.com

关于html - CSS:两个 Logo 左右对齐，应通过窗口调整大小自动缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37579199/

25 4 0
文章推荐： html - Bootstrap Material 设计输入字段没有动画
文章推荐： python - 从一系列列表创建一个 Pandas DataFrame
文章推荐： python - 根据 Pandas 中唯一行值的数量添加新列
文章推荐： node.js - 如何使用Raspberry PI和Nodejs控制继电器？
太空宇宙
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com