1
我爲這個網站提出了很多問題，我現在正在處理另一個問題。在這個頁面（Doctor Who Tribute Page），我有一組14個圖像。當你點擊第一張圖片時，它會旋轉並像卡片一樣翻轉到第二張圖片，然後是第三張圖片，然後是第四張圖片等等。我在Chrome中工作（不一定在其他瀏覽器中）。在翻轉不同大小的圖片集中顯示完整圖片
下面是問題：第一張圖像是醫生的船，TARDIS。我想獲得TARDIS的完整視圖。然而，這張照片切斷了TARDIS的底部。我爲圖像使用了vmin寬度&高度。如果我試圖擴大身高來覆蓋TARDIS的其他部分，那麼一些演員的照片會在側面被切斷（例如Jon Pertwee，第三位演員的照片，他的肘部被切掉）。不幸的是，我找不到具有更好尺寸比例的TARDIS的任何圖片。我沒有Photoshop，所以我不能裁剪圖像，反正我也不一定知道該怎麼做。在代碼中是否有一種方法可以讓圖像的尺寸變大，以便觀衆可以在沒有演員武器切斷的情況下看到完整的TARDIS？
下面是代碼：
`<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<title>A Tribute to the Doctors of Doctor Who</title>
</head>
<body>
<audio id="tardis-takeoff" src="tardis.mp3" autoplay="autoplay"></audio>
<h1>A Tribute to the Doctors of Doctor Who</h1>
<div id="outside-container">
<div id="container">
<div id="card">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
<div id="about">
<p>Over the years, so many people have played the Doctor that it's easy to lose count. In fact, it is now apparent, based upon recent plots, that the show could change actors indefinitely, or at least as long as the show is on the air. This page is a tribute to those actors that have played the Doctor over the past 53 years. Click on the photo to see each Doctor and read a little bit about him.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
body{
font-family: 'Slabo 27px', serif;
background: url("https://www.motionbackgroundsforfree.com/wp-content/uploads/2012/05/Screen-shot-2012-05-11-at-2.43.55-PM.png");
background-size: cover;
}
#container{
width: 50vmin;
height: 60vmin;
position: relative;
perspective: 3000px;
/*top: 20vh;
left: 50%;
transform: translate(-50%);*/
display: inline-block;
text-align: center;
}
#card{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform .5s;
/*-webkit-*/transform-origin: center;
}
#card.flipped{
/*-webkit-*/transform: /*translateY(100%)*/ rotateY(900deg);
}
#card div{
position: absolute;
width: 100%;
height: 100%;
/*-webkit-*/backface-visibility: hidden;
}
.front{
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/ec/82/a7/ec82a71c23384cdcc2c2f3d5f3ffeae0.png");
background-size: cover;
}
.back{
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/c8/3a/ce/c83ace6e2751a862d21d48c59d63a780.jpg");
background-size: cover;
/*-webkit-*/transform: rotateY(180deg);
}
h1 {
text-align: center;
font-weight: bold;
text-shadow: -4px 4px 3px 3999999;
color: blue;
}
div p {
display: inline-block;
color: white;
}
#outside-container{
width: 100%;
text-align: center;
}
#about{
margin: 5vh 10vh 5vh 10vh;
border: 5px solid blue;
border-radius: 10px;
text-align: center;
}
$(document).ready(function(){
var image_array = ["http://dwcompletehistory.com/images/doctors/william-hartnell-cutout-top.png", "http://www.dwcompletehistory.com/images/doctors/patrick-troughton-cutout-top.png", "http://www.dwcompletehistory.com/images/doctors/jon-pertwee-cutout-top.png",
"http://dwcompletehistory.com/images/doctors/tom-baker-cutout-top.png",
"http://dwcompletehistory.com/images/doctors/peter-davison-cutout-top.png",
"http://dwcompletehistory.com/images/doctors/colin-baker-cutout-top.png",
"http://dwcompletehistory.com/images/doctors/sylvester-mccoy-cutout-top.png",
"http://dwcompletehistory.com/images/doctors/paul-mcgann-cutout-top.png",
"http://static.tumblr.com/567348142f67734a1e368db8767d0686/024ep0z/U4Wmn5iqs/tumblr_static_nine.png", "https://vignette4.wikia.nocookie.net/clonewarsadventurescharacter/images/6/6d/Doctor_Who_transparent.png/revision/latest?cb=20130701212721", "https://s-media-cache-ak0.pinimg.com/originals/d9/59/cf/d959cfeec45586f1e90eeaf8fe0f9536.png", "http://www.doctorwho.tv/brand/assets/old-brand/img/profile-heros/the-war-doctor.png?v=2", "http://img15.deviantart.net/43dc/i/2014/326/b/3/peter_capaldi_transparent_by_tardisplus-d879032.png"
];
var img_count=0;
var about_array = ['William Hartnell was the first actor to play the role of the Doctor, from 1963 to 1966. He left the role due to failing health (some say studio issues). He reappeared in a later episode, The Three Doctors, along with Patrick Troughton and Jon Pertwee, but his scenes were filmed from his hospital bed and he was only shown on a screen in the TARDIS. He died in 1975, a mere 3 years after that guest appearance.<br><br>"The least important things, sometimes, my dear boy, lead to the greatest discoveries."', 'Patrick Troughton played the Doctor from 1966 to 1969. He played the character as sort of a hobo, and his trademark was a recorder that he would carry around and play. It was in his final story that the Doctor was first revealed to be of a race called Time Lords. After leaving in 1969, he returned to the show three times, in 1972 (The Three Doctors), 1983 (The Five Doctors), and in 1985 (The Two Doctors). He died in 1987.<br><br>"Our lives are different to anybody else's. That's the exciting thing. Nobody in the universe can do what we're doing."', 'Jon Pertwee's Doctor was earthbound for the first part of his five-year tenure (1970-1974), having been exiled as punishment by the Time Lords. While on earth, Pertwee would drive around in a jalopy he called Bessie. It was during his exile that the Doctor began his long association with the United Nations Task Force (UNIT). He revisited the role in both The Three Doctors in 1972 and in the Five Doctors in 1985, and also in two later BBC audio productions. He died in 1996.<br><br>"A straight line may be the shortest distance between two points, but it is by no means the most interesting."', 'Tom Baker, who played the doctor from 1974 to 1981 (the longest period for an actor to play the Doctor), was considered the favorite Doctor by most fans of the show's original 26 year run. He wore an insanely huge scarf and liked to hand out sugary candies called Jelly Babies. He ended up marrying one of his companions from the show, Lalla Ward (Romana). Although he declined to appear in The Five Doctors, he did return to the Doctor Who set in 50th anniversary episode The Day of the Doctor, although it is a little vague as to whether he is playing a future incarnation of the Doctor or not.<br><br>"There's no point in being grown up if you can't be childish sometimes."', 'Peter Davison played the Doctor from 1981 to 1984. He was more serious than his predecessors, though not in a brooding way. He wore a stalk of celery on his jacket, something of which few took notice. Many of his stories took harder tones. One of his most memorable episodes involved the death of one of his companions, Adric. Years after leaving the role, Davison took it up again to record many audio adventure Doctor Who stories through the company Big Finish. He also reprised the role in the short Red Nose Day special video Time Crash with David Tennant.<br><br>"For some people, small, beautiful events are what life is all about."', 'Colin Baker (no relation to Tom Baker) is generally regarded as the least favorite Doctor. He was as arrogant as he was colorful. He is the only actor to have officially been fired from the role, his reply to which was to refuse to film a regeneration scene to hand over the role to the next actor. He did, however, revisit the role in several audio adventures by Big Finish. He held the role on the show from 1984 to 1986.<br><br>"A little gratitude wouldn't irretrievably damage my ego..."', 'Sylvester McCoy was final actor to play the role during the show's original run. He had to fill both his own and Colin Baker's roles in the regeneration scene leading to his incarnation. His trademark was an umbrella with a question mark as a handle. He portrayed the Doctor as both comical and manipulative. He held the role through the end of the original run in 1989. He came back for the Doctor Who television movie in 1996 to turn the role over to the next actor. He also starred in many Big Finish Doctor Who audio adventures.<br><br>"You can always judge a man by the quality of his enemies."', 'Paul McGann only appeared twice on screen as the Doctor, first in the Doctor Who television movie released in 1996, and second, in a short internet episode entitled Night of the Doctor, produced in conjunction with the 50th anniversary episode Day of the Doctor, and which featured his regeneration scene. BBC had hoped the 1996 movie would lead to a comeback for the show, but that did not happen. McGann's main body of work in Doctor Who was through the audio adventures by produced by Big Finish. Of course, his character has also had quite a bit of development in novels, so fans are not left without any idea of why this Eighth Doctor is like.<br><br>"I can't make your dream come true forever, but I can make it come true today."', 'When Christopher Eccelston took over as the Doctor in 2005, the show had just come back as a series after being off the air (with the exception of the movie) for 17 years. Christopher's Doctor brought several new things to the show, including somewhat ordinary clothing rather than something flamboyant, and short hair for the first time (McGann, who had short hair, had to wear a wig because he was told the Doctor always had long hair). Although Eccelston's run on the show was short-lived, his performance definitely cemented the success of the show's return. Christopher had a chance to return to the show for the 50th anniversary episode the Day of the Doctor but declined.<br><br>"You were fantastic, absolutely fantastic. And do you know what? So was I."', 'David Tennant is by far considered the most popular Doctor of the new series, if not the whole series from the beginning. What makes his story all the better is that the reason he went into acting in the first place is because, since he was a young boy, he always wanted to play the Doctor. Tennant has been the only Doctor to use up a regeneration and not change bodies, at least not the first time. Offscreen, Tennant married Georgia Moffett in 2011. Not only did Moffett play the Doctor's daughter in a Tennant episode, but Georgia is in fact the real-life daughter of Peter Davison, the fifth Doctor. Tennant left the role in 2010, after being the Doctor for five years. However, he did return in the previously mentioned Day of the Doctor alongside Matt Smith, the eleventh Doctor, and a heretofore unseen previous incarnation (more on that later).<br><br>"I don't want to go!"', 'Matt Smith is the youngest actor to play the Doctor to date. He is best known for his bowtie and the occasional Fez. He also has the distinction of being featured in a U.S.Lego set, along with Peter Capaldi. Smith was originally a football(soccer) player until an injury sidelined him, but he had a chance to show off his incredible talent in an episode of Doctor Who. Smith was fantastic at playing a really old person in a young person's body (the Doctor was, at that time, over 900 years old). In 2013, he starred in the 50th anniversary episode of the Show, The Day of the Doctor. This episode was actually aired in movie theaters as well as on television. Matt gave up the role in the very next episode.<br><br>"The way I see it, every life is a pile of good things and bad things. The good things don't always soften the bad things, but vice versa, the bad things don't always spoil the good things and make them unimportant."', 'John Hurt's role as the so-called War Doctor was a bit unusual. He appeared on the show only once as a main character, in The Day of the Doctor, and only for a few seconds in the episode before that. Yet his incarnation was one that took place between Paul McGann and Christopher Eccelston, during the time of a great Time War between his race and their archenemies the Daleks. The story was that we had not seen him or heard of him before because the Doctors after him did not really consider Hurt's character to be the Doctor because of his unsavory wartime activities, including, or so they thought, the destruction of his own planet and race (Matt Smith and David Tennant saved him from actually doing so). He has also had at least one book written about his character, and he has done four Big Finish audio productions. Hopefully, audiences will have more chances to catch him on the screen, but only time will tell.<br><br>"Great men are forged in fire. It is the privilege of lesser men to light the flame."', 'Peter Capaldi is the latest, though not the last, incarnation of the Doctor, picking up the role in 2014. He has announced that 2017 will be his last year as the Doctor. His Doctor is known for bluntness and an inability to sense or understand other's feelings, making him seem altogether more alien than most of the other Doctors. He is also the only Doctor to have a regular Scottish accent (David Tennant is Scottish but hid his accent for the show). Although the picture shows him wearing a white dress shirt and a long dress coat, more often than not in the show he is wearing a hoodie and a t-shirt, and even sunglasses (the glasses are, shall we say, high tech). Capaldi also plays the electric guitar several times throughout the show. Big Finish at this time is not allowed to produce any Peter Capaldi stories, presumably because of his current role on television, but they will most likely be able to produce some once Capaldi has left.<br><br>"I'm the Doctor. I've lived for over 2000 years. I've made many mistakes. It's about time that I did something about that."'];
var side=true;
$("#card").click(function(){
$(this).toggleClass("flipped");
side=!side;
console.log(side);
if(side){
$(".front").css("background-image", "url("+image_array[img_count]+")");
}else{
$(".back").css("background-image", "url("+image_array[img_count]+")");
}
$("p").replaceWith("<p>"+about_array[img_count]+"</p>");
// Increment counter
img_count++;
// If counter has reached the end of the image array, reset it.
if(img_count==image_array.length){
img_count=0;
}
});
}）;
的圖像尺寸，在情況下需要的話，如下所示： TARDIS - 730x1094 - 1.5比 哈特內爾 - 396x530 - 1.34 特勞 - 380x567 - 1.49 Pertwee - 432x549 - 1.27 貝克筆 - 400x569 - 1.42 戴維森 - 400x604 - 1.51 貝克ç - 400x673 - 1.68 的McCoy - 400x532 - 1.33 麥加 - 400x524 - 1.31 Eccelston - 273x750 - 2.75 坦 - 228x700 - 3.07 史密斯 - 241x350 - 1.45 赫特 - 706x836 - 1.18 Capaldi - 1024x1536 - 1.5
謝謝！
也許這將幫助：https://www.w3schools.com/cssref/css3_pr_background-size.asp – niceman