javascript - 为报价创建幻灯片

Question

我目前正在制作相册，我正在使用 AngularJS 和 CSS，但我使用的图片显示得太大了。无论我做什么，我都无法调整图片的大小，并且想知道是否有人可以看到我做错了什么。我知道我可以在 Photoshop 中调整大小，但是当我这样做时，它们不会在预览中正确显示。任何帮助将不胜感激。我的JS代码如下....

'use strict';

angular.module('example366', ['ngAnimate', 'ngTouch'])
.controller('MainCtrl', function ($scope) {

// Set of Photos
$scope.photos = [
    {src: 'Images/KyahMaxCabin.jpg', desc: 'Kids Cabin', height: "250px", width: "300px"},
    {src: 'http://farm9.staticflickr.com/8449/7918424278_4835c85e7a_b.jpg', desc: 'Image 02'},
    {src: 'http://farm9.staticflickr.com/8457/7918424412_bb641455c7_b.jpg', desc: 'Image 03'},
    {src: 'http://farm9.staticflickr.com/8179/7918424842_c79f7e345c_b.jpg', desc: 'Image 04'},
    {src: 'http://farm9.staticflickr.com/8315/7918425138_b739f0df53_b.jpg', desc: 'Image 05'},
    {src: 'http://farm9.staticflickr.com/8461/7918425364_fe6753aa75_b.jpg', desc: 'Image 06'}
];

// initial image index
$scope._Index = 0;

// if a current image is the same as requested image
$scope.isActive = function (index) {
    return $scope._Index === index;
};

// show prev image
$scope.showPrev = function () {
    $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;
};

// show next image
$scope.showNext = function () {
    $scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;
};

// show a certain image
$scope.showPhoto = function (index) {
    $scope._Index = index;
};
});

我从一个教程网站下载了代码，第一张图片是我目前唯一的一张。我想尝试一下，看看在我添加大量图片之前会发生什么。所以第一张照片的代码是我的，只是想得到一些关于如何改变大小的反馈。我刚刚开始使用 JavaScript，所以这对我来说都是全新的。

谢谢!

Answer 1

您还应该向我们展示放置此 slider 的 html 行，以及设置图像样式的相关 css。否则很难回答。 您可能不需要编写额外的 js，您可以通过 slider 中 img 元素的简单 css 样式来解决调整大小问题。它可以像这样简单:

img {
  width: 100%;
}

当然，我不确定您的 javascript 如何在文档中设置此 slider ，因此我不知道您需要使用特定的 CSS 选择器来定位 slider 内的 img 元素。几乎可以肯定，您的问题可以通过使用 css 定位您的 img 元素并调整一个或几个属性来解决。