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

您还应该向我们展示您放置此滑块的html行以及为图像设置样式的相关CSS。很难回答别的。您可能不需要编写额外的js，您可以使用滑块中img元素的简单CSS样式来修复调整大小问题。它可以这么简单：

img {
  width: 100%;
}

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

为报价创建幻灯片

1 个答案: