有一个较小的图像然后div拉伸填充div的区域没有图像比率被破坏

时间：2017-10-02 07:01:59

标签： html css image

我在页面上有一个图像列表，它们以div 250 px x 175 px为中心。我想要的是让图像的大小增加到div而不会弄乱图像的大小比例，所以如果图像是139 x 50（小横幅），它会变得更宽，直到它的250 x 89反之亦然，50 x 100图像将缩放为150x175。

如果可能，我宁愿在CSS中这样做。

＆＃13;
＆＃13; 
.suppliers-blog-thumbnail .suppliers-overlay {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #1c1c1c;
  bottom: 0px;
  left: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
}

.suppliers-blog-thumbnail:hover .suppliers-overlay {
  opacity: 0.4;
}

.suppliers-blog-thumbnail {
  position: relative;
  text-align: center;
  width: 250px;
  height: 175px;
}

.suppliers-blog-thumbnail .image_center img {
  position: absolute;
  margin: auto;
  max-height: 175px;
  max-width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
＆＃13; 
<div class="suppliers-blog-thumbnail">
  <a target="_blank" class="image_center" href="http://amico-securityproducts.com/lath.htm">
    <img src="http://workspace3.joefoster.org/wp-content/uploads/2017/09/7b6442_1488bc59e28f439b89b942afef0f7646-mv2.gif">
    <span class="suppliers-overlay">&nbsp;</span>
  </a>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

说你有：

<div class="wrapper-class">
  <img class="image"/>
  <img class="image"/>
</div>

你可以拥有CSS：

.wrapper-class{
  width:275px;
  height:160px;
}
.wrapper-class .image{
  width:100%;
}

这里的问题是当宽度占据整个div的宽度时，高度会自动调整。

答案 1 :(得分：0)

我认为这是您想要的，img width设置为100%而height设置为auto。

.suppliers-blog-thumbnail .suppliers-overlay {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #1c1c1c;
  bottom: 0px;
  left: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
}

.suppliers-blog-thumbnail:hover .suppliers-overlay {
  opacity: 0.4;
}

.suppliers-blog-thumbnail {
  position: relative;
  text-align: center;
  width: 250px;
  height: 175px;
}

.suppliers-blog-thumbnail .image_center img {
  height: auto;
  width: 100%;
  position: absolute;
  margin: auto;
  max-height: 175px;
  max-width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
<div class="suppliers-blog-thumbnail">
  <a target="_blank" class="image_center" href="http://amico-securityproducts.com/lath.htm">
    <img src="http://workspace3.joefoster.org/wp-content/uploads/2017/09/7b6442_1488bc59e28f439b89b942afef0f7646-mv2.gif">
    <span class="suppliers-overlay">&nbsp;</span>
  </a>
</div>

答案 2 :(得分：0)

看看我的解答你的答案，我希望这就是你的意思。如果我理解。 通常对于这类问题我使用背景图像而不是img，因为它具有灵活性。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { AuthenticationService } from './_services/authentication.service';
import { SocketService } from './_services/socket.service';

import { AuthGuard } from './_guards/auth.guard';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdNativeDateModule, MdDatepickerModule, MdButtonToggleModule, MdListModule, MdSnackBarModule, MdSelectModule, MdCheckboxModule, MdDialogModule, MdProgressSpinnerModule, MdInputModule, MdGridListModule, MdTooltipModule, MdSidenavModule, MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule, MdTabsModule } from '@angular/material';

import { BodyComponent } from './_components/pages/body/body.component';
import { WorkspaceComponent } from './_components/pages/workspace/workspace.component';
import { IndexComponent } from './_components/pages/index/index.component';

import { UserDashboardComponent } from './_components/dashboards/user-dashboard/user-dashboard.component';
import { TeacherDashboardComponent } from './_components/dashboards/teacher-dashboard/teacher-dashboard.component';

import { UserSidebarComponent } from './_components/sidebars/user-sidebar/user-sidebar.component';
import { TeacherSidebarComponent } from './_components/sidebars/teacher-sidebar/teacher-sidebar.component';

import { SeparatorComponent } from './_components/other/separator/separator.component';

import { LearnMoreDialogComponent } from './_components/dialogs/learn-more-dialog/learn-more-dialog.component';
import { AdditionDialogComponent } from './_components/dialogs/addition-dialog/addition-dialog.component';
import { SearchUsersDialogComponent } from './_components/dialogs/search-users-dialog/search-users-dialog.component';
import { SearchDialogsDialogComponent } from './_components/dialogs/search-dialogs-dialog/search-dialogs-dialog.component';
import { ProfileViewDialogComponent } from './_components/dialogs/profile-view-dialog/profile-view-dialog.component';
import { NewListCreateComponent } from './_components/dialogs/new-list-create/new-list-create.component';


import { AdditionColumnComponent } from './_components/columns/addition-column/addition-column.component';
import { MultiplicationColumnComponent } from './_components/columns/multiplication-column/multiplication-column.component';
import { DivisionColumnComponent } from './_components/columns/division-column/division-column.component';

import { StudentInfoComponent } from './_components/info/student-info/student-info.component';
import { TeacherInfoComponent } from './_components/info/teacher-info/teacher-info.component';
import { UsersListComponent } from './_components/dashboards/users-list/users-list.component';
import { ChatComponent } from './_components/dashboards/chat/chat.component';
import { ConnectedDevicesComponent } from './_components/dashboards/connected-devices/connected-devices.component';
import { MarksTableComponent } from './_components/dashboards/marks-table/marks-table.component';
import { ListsComponent } from './_components/dashboards/lists/lists.component';
import { EditProfileComponent } from './_components/dashboards/edit-profile/edit-profile.component';

import { MessagesOverviewComponent } from './_components/other/messages-overview/messages-overview.component';

import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { MobileKeyboardComponent } from './_components/pages/mobile-keyboard/mobile-keyboard.component';




@NgModule({
  declarations: [
    AppComponent,
    BodyComponent,
    UserDashboardComponent,
    TeacherDashboardComponent,
    UserSidebarComponent,
    TeacherSidebarComponent,
    SeparatorComponent,
    IndexComponent,
    LearnMoreDialogComponent,
    WorkspaceComponent,
    AdditionColumnComponent,
    MultiplicationColumnComponent,
    DivisionColumnComponent,
    AdditionDialogComponent,
    StudentInfoComponent,
    TeacherInfoComponent,
    UsersListComponent,
    ChatComponent,
    ConnectedDevicesComponent,
    MarksTableComponent,
    ListsComponent,
    SearchUsersDialogComponent,
    SearchDialogsDialogComponent,
    MessagesOverviewComponent,
    ProfileViewDialogComponent,
    EditProfileComponent,
    NewListCreateComponent,
    MobileKeyboardComponent,
  ],
  entryComponents: [
    LearnMoreDialogComponent,
    AdditionDialogComponent,
    SearchUsersDialogComponent,
    SearchDialogsDialogComponent,
    ProfileViewDialogComponent,
    NewListCreateComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    MdNativeDateModule,
    MdDatepickerModule,
    MdButtonToggleModule,
    MdListModule,
    MdSnackBarModule,
    MdSelectModule,
    MdCheckboxModule,
    MdDialogModule,
    MdProgressSpinnerModule,
    MdInputModule,
    MdGridListModule,
    MdTooltipModule,
    MdSidenavModule,
    MdButtonModule,
    MdMenuModule,
    MdCardModule,
    MdToolbarModule,
    MdIconModule,
    MdTabsModule
  ],
  providers: [
    AuthGuard,
    AuthenticationService,
    SocketService,
    MdNativeDateModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
 .suppliers-blog-thumbnail .suppliers-overlay {
          position: absolute;
          top: 0px;
          right: 0px;
          background-color: #1c1c1c;
          bottom: 0px;
          left: 0px;
          opacity: 0;
          filter: alpha(opacity=0);
        }

        .suppliers-blog-thumbnail:hover .suppliers-overlay {
          opacity: 0.4;
        }

        .suppliers-blog-thumbnail {
          position: relative;
          text-align: center;
          width: 250px;
          height: 175px;
        }

        .suppliers-blog-thumbnail .image_center img {
          position: absolute;
          margin: auto;
          max-height: 175px;
          max-width: 100%;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }

        .bg-responsive{
            width: 100%;
            height: 100%;
            background-size: 100%;
            background-position: center;
            background-repeat: no-repeat;
         }

相关问题
最新问题