问题：

无法缩放移动设备上的图像

贺方伟

2023-03-14

我有一个图像，我正在尝试缩放，因为屏幕大小减少。在桌面上，1336x625分辨率的图像可以正常工作，但一旦屏幕缩小到500x625时，图像就不能适当缩放，边缘也会被削减。我试着把最大宽度和位置。但还是没用。我需要改变什么才能让它工作。

Css代码

* {
    margin: 0;
    padding: 0;
}

body {
   font-family: "Montserrat",sans-serif;
 background-color: #CCC; 
}

.card-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        perspective: 1000px;
}

.card {
        width: 650px;
        height: 400px;
        background-color: #fff;
        transform-style: preserve-3d;
        position: relative;
        border-radius: 15px;
        transition: transform 1s;
}


.card-wrapper:hover .card {
        transform: rotateY(180deg);
        box-shadow: 1 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        
}


.card-front{
        width: 100%;
        height: 100%;
        border-radius: 15px;
        backface-visibility: hidden;
        background: linear-gradient(white,white);
}

.up {
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: right;
    
}

.up img {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 5px;
    right: 5px;
    }

.up span {
   text-transform: uppercase;
    color: #0d5692;
}

.down {
    position: absolute;
    width: 70%;
    height: 30%;
    color: black;
    top: 170px;
    left: 5px;
}

.down-content {
      
      display: flex;
      align-items: center;
      margin: 10px 0;
}

.person {
    font-family: "Yu Gothic",UI-Semibold;
    font-size: 12px;
    color: rgb(102, 0, 51);
    padding-left: 20px;
}

.designation {
    font-family: "Yu Gothic",UI-Semibold;
    font-size: 10px;
    color: rgb(77, 0, 102);
    padding-left: 20px;
}

.address {
    font-family: "Arial Nova Light";
    font-size: 15px;
    color: rgb(77, 0, 102);
    padding-left: 20px;
}

.phone {
    font-family: "Arial Nova Light";
    font-size: 15px;
    color: rgb(77, 0, 102);
    padding-left: 20px;
}

.card-back {
        transform: rotateY(180deg);
        position: absolute;
        top:0;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 15px;
        background: linear-gradient(white,white);
}

.back-up {
        width: 40%;
        height: 40%;
}

.back-up img {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 5px;
    right: 5px;
    }

.back-down {
    position: absolute;
    width: 100%;
    height: 60%;
    color: black;
    top: 140px;
    left: 5px;
}

.back-designation {
    font-family: "Meiryo";
    font-size: 10px;
    color: rgb(77, 0, 102);
    padding-left: 20px;
}

.back-person {
    font-family: "Meiryo UI";
    font-size: 15px;
    color: rgb(77, 0, 102);
    padding-left: 20px;
}

.back-address {
    font-family: "Meiryo";
    font-size: 15px;
    color: rgb(77, 0, 102);
    padding-left: 20px;
}

.back-phone {
    font-family: "Meiryo";
    font-size: 15px;
    color: rgb(77, 0, 102);
    padding-left: 20px;
}

Html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat"
      rel="stylesheet"
    />
    
    <link rel="stylesheet" href="style-Origional.css" />
    <title>Business Card</title>
  </head>
  <body>
    <div class="card-wrapper">
            <div class="card">
                    <div class="card-front">
                                <div class="up">
                                        <img src="images/logo.png" />
                                        <!-- <h4><span>AWS Architect</span></h4> -->
                                </div>
                                <div class="down">
                                    <div class="person down-content">
                                            <div>
                                                 <h2> Jarich Vansteenberge </h2>
                                            </div>
                                    </div>
                                    <div class="designation down-content">
                                            <div>
                                                 <h2> Manager </h2>
                                                 <h2> Technology & Innovation </h2>
                                                 <h2> Information & Digital Solutions </h2>
                                            </div>
                                    </div>
                                    <div class="address down-content">
                                            <div>
                                                  <p> Astrazeneca K.K. </p>
                                                  <p> Grand Front Osaka Tower B 3-1,</p>
                                                  <p> Ofuka-chu, Kita-ku, Osaka 530-0011, Japan </p>
                                            </div>
                                    </div>
                                    <div class="phone down-content">
                                            <div>
                                                <p> Mobile +81-80-6222-4967 </p>
                                                <p> E-mail jarich.vansteenberge@astrazeneca.com </p>
                                            </div>
                                    </div>
                                </div>
                    </div>
                    <div class="card-back" >
                                <div class="back-up">
                                        <img src="images/logo.png" width="150"/>
                                        <!-- <h4><span>AWS Architect</span></h4> -->
                                </div>
                                 <div class="back-down">
                                    <div class="back-designation down-content">
                                            <div>
                                                 <h2> インフォメーション＆デジタルソリューションズ本部 </h2>
                                                 <h2> テクノロジーとイノベーション </h2>
                                                 <h2> マネージャー </h2>
                                            </div>
                                    </div>
                                    <div class="back-person down-content">
                                            <div>
                                                 <h2> バンステーンベルグ　ジャリコ </h2>
                                            </div>
                                    </div>
                                    <div class="back-address down-content">
                                            <div>
                                                  <p> アストラゼネカ </p>
                                                  <p> グランフロント大阪タワーB 3-1,</p>
                                                  <p> 大阪市北区大深法律事務所530-0011 </p>
                                            </div>
                                    </div>
                                    <div class="back-phone down-content">
                                            <div>
                                                <p> 携帯電話番号 +81-80-6222-4967 </p>
                                                <p> E-mail jarich.vansteenberge@astrazeneca.com </p>
                                            </div>
                                    </div>
                                </div> 
                    </div>
            </div>
    </div>
  </body>
</html>

共有1个答案

方飞鸣

2023-03-14

.responsive {
  width:100%;
  height:auto;

}

您可以将这些类添加到映像中，它将很好地工作

类似资料：

无移动缩放SVG

我现在还没有为转换中心或任何东西定义，因为它不起作用。非常感谢你的帮助。我刚刚开始学习HTML，就像昨天一样，所以我确信这是一件简单的事情，我只是受过足够的教育来发现这个问题。
Mandelbrot缩放，但图像移动并缩小

我一直在做曼德尔布洛特集，并试图缩放，但缩放模式变得非常麻烦。当我缩放它完美地缩放，但图像大小减少到原来的一半。下次我再次缩放时，图片大小会增加，并试图跳过查看窗口。代码是c /opengl.在这里发布之前，我试图让我的代码变得干净一点。执行时
无法移动上传的图像

当我上传图片时，我收到以下错误：警告:move _ uploaded _ file(/images/profile 767 abb feae 82141 . jpg)[function . move-uploaded-file]:无法打开流:第5行的/Applications/XAMPP/xamppfiles/htdocs/core/functions/users . PHP中没有这样的文件或目
onClick无法在移动设备上运行（触摸）

问题内容：好的，我想做的是当用户单击列表项时将div向下滑动。 Selectric)，它将选择框转换为无序列表。因此，当用户单击源输出为列表项的a时，我希望div向下滑动。在移动浏览器（iOS7）上，选择框UI与标准选择框UI相同。关于移动设备onClick的最佳做法是什么？基本的jQuery：谢谢。问题答案：最好将事件与jQuery方法结合使用：而且我不明白为什么要使用方法，因为
Bootstrap 3-移动设备上的桌面视图

问题内容：在移动设备上时，是否可以将引导网站显示为桌面版本？基本上，页面将显示992px或1200px视口，而不是小型设备。例如，BBC允许您使用页面底部的链接在移动网站和桌面网站之间进行切换，这就是我想做的。谢谢问题答案：您只需要设置视口像您说的那样建立一个链接，该链接是页面的重新加载，但带有，则可以设置会话，只要设置了该会话，就可以编写代替此（响应版本）在你的将此用作按钮
YouTube自动播放无法在具有嵌入式HTML5播放器的移动设备上运行

问题内容：对于我的问题，我有一个链接。我想通过在fancybox叠加窗口中单击链接来播放视频。这不是问题。问题是参数，例如“自动播放”或“自动隐藏”。以下链接无效：覆盖窗口已打开，但视频未自动播放。编辑：我想在移动设备上使用HTML5播放器。在桌面浏览器上，它可以使用参数，但不能在移动设备上使用。问题答案：事实证明，无法在iOS设备（iPhone，iPad，iPod touch）和A

无法缩放移动设备上的图像

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档