I have an image that I am trying to scale as the screen size reduces. On desktop it work fine for resolution 1336 x 625 but as soon as the screen reduces to 500 X 625 the image does not scale properly and edges are cut down. I tried putting max-width and the position. Still it doesn't work. What I need to change to make it work.
Css code
* {
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 Code:
<!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>
