Question

我正在使用bootstrap 3创建一个用户配置文件页面，并以6行（在大屏幕上）显示它们。问题是配置文件有不同大小的图像，我试图弄清楚如何强制它们都是相同的高度和宽度而不改变宽高比（裁剪图像很好）。这是一个fiddle

这是我到目前为止所做的：

%Create training set

trainInd = data.NumDate < datenum('2008-01-01');
trainX = X(trainInd,:);
trainY = data.SYSLoad(trainInd);

% Create test set to test later
testInd = data.NumDate >= datenum('2008-01-01');
testX = X(testInd,:);
testY = data.SYSLoad(testInd);
testDates = dates(testInd);

%Neural network

X = tonndata(trainX,true,false);
T = tonndata(trainY,true,false);

% Choose a Training Function

trainFcn = 'trainlm';  % Levenberg-Marquardt backpropagation.

% Create a Nonlinear Autoregressive Network with External Input
inputDelays = 1:25;
feedbackDelays = 1:25;
hiddenLayerSize = 10;
net = narxnet(inputDelays,feedbackDelays,hiddenLayerSize,'open',trainFcn);

% Prepare the Data for Training and Simulation

[x,xi,ai,t] = preparets(net,X,{},T);

% Setup Division of Data for Training, Validation, Testing
net.divideParam.trainRatio = 70/100;
net.divideParam.valRatio = 15/100;
net.divideParam.testRatio = 15/100;

% Train the Network
[net,tr] = train(net,x,t,xi,ai);

% Test the Network
y = net(x,xi,ai);
e = gsubtract(t,y);
performance = perform(net,t,y)
% View the Network
view(net)

%% Forecast using Neural Network Model
% Once the model is built, perform a forecast on the independent test set. 
load Data\testSet
forecastLoad = sim(net, testX')';

Answer 1

您需要使用overflow: hidden样式。以下是您将图像保留在div元素中的示例：

https://jsfiddle.net/ajpofdzr/6/

Answer 2

可以使用object-fit: cover;轻松完成此操作，但此功能is not supported by IE/Edge。如果您需要IE支持 - 您可以尝试使用background-size: cover;，这至少是supported by the latest IE。

这是一个有效的jsfiddle with both solutions。

Answer 3

这可能会有所帮助：Centre crop thumbnails with CSS

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

修复所有图像的大小

3 个答案: