使用jquery javascript调整div并拉伸背景图像

时间：2017-01-13 12:36:38

标签： javascript jquery css

我有一个盒子div，它有标题和正文。包含具有背景图像的div。

＆＃13;
＆＃13; 
setInterval(function(){

  var height = $(".box").height();

  $(".box").height(height+2)

}, 1000);
＆＃13; 
.box{    
  height: 100%;
  background-color: #22ff2f;
  width:350px;
}
.box-header{position:inherit; background-color:#9ed;width:100%;}
.box-body{}

.window{
  background-position: center;
  background-size: cover;
  background-image: url('http://dailybestlike.com/wp-content/uploads/2015/07/simple-ideas-products-11.jpg');
  min-height:190px;
  width:100%;
  height:100%;
  position:relative;
  text-align:center;
  overflow:hidden;
        }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">
  <div class="box-header">
    header
  </div>
  <div class="box-body">
    <div class="window">

    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

enter image description here

我的.box是一个可调整大小的框，因此将使用鼠标

调整大小

但是图像不能拉伸盒子。我想用CSS属性来做这件事。我不想用javascript设置大小。这可能吗？

WORKİNG DEMO

4 个答案:

答案 0 :(得分：0)

试试这个，

[{
    "Class": {
        "ClassID": 2,
        "CourseID": 2,
        "ClassStatusID": 1,
        "ClassTypeID": 1,
        "InstructorID": null,
        "AlternateInstructorID": null,
        "ContactPersonID": null,
        "CurrencyID": 2,
        "CertificateID": null,
        "AllowSelfEnrollment": true,
        "ClassSizeMin": 150,
        "ClassSizeMax": 170,
        "Username": "test",
        "ClassUrl": "www.google.com",
        "StartDate": "2016-10-23T00:00:00",
        "EndDate": "2016-10-23T00:00:00",
        "DiscountedCoursePrice": 180.00,
        "CoursePrice": 210.00,
        "Password": null,
        "WhoCreated": 3,
        "WhenCreated": "2017-01-02T15:30:45.623",
        "WhoModified": 3,
        "WhenModified": "2017-01-03T01:00:45.623",
        "PasswordString": null,
        "CoursePriceString": null,
        "DiscountedCoursePriceString": null
    },
    "ClassLang": {
        "ClassLangID": 5,
        "ClassID": 2,
        "LanguageTypeID": 3,
        "Title": "de-DE_Introduction to Piano",
        "Description": "de-DE_Introduction to Piano",
        "WhoCreated": null,
        "WhenCreated": null,
        "WhoModified": null,
        "WhenModified": null
    },
    "UserName": "User admin"
}, {
    "Class": {
        "ClassID": 3,
        "CourseID": 3,
        "ClassStatusID": 2,
        "ClassTypeID": 1,
        "InstructorID": null,
        "AlternateInstructorID": null,
        "ContactPersonID": null,
        "CurrencyID": 2,
        "CertificateID": null,
        "AllowSelfEnrollment": true,
        "ClassSizeMin": 140,
        "ClassSizeMax": 180,
        "Username": "test",
        "ClassUrl": "www.google.com",
        "StartDate": "2016-10-23T00:00:00",
        "EndDate": "2016-10-23T00:00:00",
        "DiscountedCoursePrice": 180.00,
        "CoursePrice": 210.00,
        "Password": null,
        "WhoCreated": 3,
        "WhenCreated": "2017-01-02T15:30:45.623",
        "WhoModified": 3,
        "WhenModified": "2017-01-03T01:00:45.623",
        "PasswordString": null,
        "CoursePriceString": null,
        "DiscountedCoursePriceString": null
    },
    "ClassLang": {
        "ClassLangID": 8,
        "ClassID": 3,
        "LanguageTypeID": 3,
        "Title": "de-DE_Class Learn classical music",
        "Description": "de-DE_Class Learn classical music",
        "WhoCreated": null,
        "WhenCreated": null,
        "WhoModified": null,
        "WhenModified": null
    },
    "UserName": "User admin"
}, {
    "Class": {
        "ClassID": 4,
        "CourseID": 4,
        "ClassStatusID": 2,
        "ClassTypeID": 1,
        "InstructorID": null,
        "AlternateInstructorID": null,
        "ContactPersonID": null,
        "CurrencyID": 2,
        "CertificateID": null,
        "AllowSelfEnrollment": true,
        "ClassSizeMin": 15,
        "ClassSizeMax": 17,
        "Username": "test",
        "ClassUrl": "www.google.com",
        "StartDate": "2016-10-23T00:00:00",
        "EndDate": "2016-10-23T00:00:00",
        "DiscountedCoursePrice": 180.00,
        "CoursePrice": 210.00,
        "Password": null,
        "WhoCreated": 3,
        "WhenCreated": "2017-01-02T15:30:45.623",
        "WhoModified": 3,
        "WhenModified": "2017-01-03T01:00:45.623",
        "PasswordString": null,
        "CoursePriceString": null,
        "DiscountedCoursePriceString": null
    },
    "ClassLang": {
        "ClassLangID": 11,
        "ClassID": 4,
        "LanguageTypeID": 3,
        "Title": "de-DE_Playing Electric blue guitar",
        "Description": "de-DE_Playing Electric blue guitar",
        "WhoCreated": null,
        "WhenCreated": null,
        "WhoModified": null,
        "WhenModified": null
    },
    "UserName": "User admin"
}]

JS CODE：

<div class="box">
  <div class="box-header">
    header
  </div>
  <div class="box-body">
    <div class="window">

    </div>
  </div>
</div>

此代码可以拉伸您的图像。

答案 1 :(得分：0)

您需要为.box-header添加高度，并且非常感谢您可以计算.box-body高度。现在，height:100%; .window中的setInterval(function(){ var height = $(".box").height(); $(".box").height(height+2) }, 1000);将正常运行。

检查一下：

＆＃13;
＆＃13; 
.box{    
        height: 100%;
        background-color: #22ff2f;
        width:350px;
      }
    .box-header{
      position:inherit;
      background-color:#9ed;
      width:100%;
      height: 20px;
    }
    .box-body{
      height: calc(100% - 20px);
}

    .window{
        background-position: center;
        background-size: cover;
        background-image: url('http://dailybestlike.com/wp-content/uploads/2015/07/simple-ideas-products-11.jpg');
        min-height:190px;
        width:100%;
        height:100%;
        position:relative;
        text-align:center;
        overflow:hidden;
    }
＆＃13; 
<div class="box">
      <div class="box-header">
        header
      </div>
      <div class="box-body">
          <div class="window">

          </div>
      </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
＆＃13; 
Option Explicit

Const strFormTitle = "Enter Minimum and Maximum Dates in d/m/yyyy format"  'Edit for different regional date format
Const strShtName As String = "Latency"              'Name of worksheet with  ranges to be processed
Const strDateFormat As String = "d mmm yyyy"       'Edit for different regional date format
Const strCrit1 As String = "Pass, Fail, In Progress"    'Criteria for output to AE2. (Can insert or delete criteria with comma between values. OK to have spaces with the commas)
Const strCrit2 As String = "COMPATIBLE"     'Criteria for column E. (One criteria only)
Const strDateRng As String = "K:K"      'Column with Dates
Const strCrit1Col As String = "O:O"     'Column with "Pass, Fail, In Progress"
Const strCrit2Col As String = "E:E"     'Column with "COMPATIBLE"
Const strOutput1 As String = "AE2"      'The cell for output "Pass, Fail, In Progress"
Const strOutput2 As String = "AF2"      'The cell for output "Pass, Fail, In Progress" plus "COMPATIBLE"



Private Sub UserForm_Initialize()
    Me.lblTitle = strFormTitle
End Sub

Private Sub cmdProcess_Click()
    Dim wf As WorksheetFunction
    Dim ws As Worksheet
    Dim rngDates As Range       'Range of dates
    Dim rngCrit1 As Range       'Range to match Criteria 1
    Dim rngCrit2 As Range       'Range to match Criteria 2
    Dim dteMin As Date
    Dim dteMax As Date
    Dim rngOutput1 As Range
    Dim rngOutput2 As Range
    Dim arrSplit As Variant
    Dim i As Long

    Set wf = Application.WorksheetFunction
    Set ws = Worksheets(strShtName)
    With ws
        Set rngDates = .Columns(strDateRng)
        Set rngOutput1 = .Range(strOutput1)
        Set rngOutput2 = .Range(strOutput2)
        Set rngCrit1 = .Range(strCrit1Col)
        Set rngCrit2 = .Range(strCrit2Col)
    End With

    dteMin = CDate(Me.txtMinDate)
    dteMax = Int(CDate(Me.txtMaxDate) + 1)

    If dteMin > dteMax Then
        MsgBox "Minimum date must be less than maximum date." & vbCrLf & _
        "Please re-enter a valid dates."
        Exit Sub
    End If

    arrSplit = Split(strCrit1, ",")

    'Following loop removes any additional leading or trailing spaces (Can be in the string constant)
    For i = LBound(arrSplit) To UBound(arrSplit)
        arrSplit(i) = Trim(arrSplit(i))
    Next i

    rngOutput1.ClearContents 'Start with blank cell
    For i = LBound(arrSplit) To UBound(arrSplit)
    rngOutput1.Value = rngOutput1.Value + wf.CountIfs(rngDates, ">=" & CLng(dteMin), _
                rngDates, "<" & CLng(dteMax), _
                rngCrit1, arrSplit(i))
    Next i

    rngOutput2.ClearContents    'Start with blank cell
    For i = LBound(arrSplit) To UBound(arrSplit)
    rngOutput2.Value = rngOutput2.Value + wf.CountIfs(rngDates, ">=" & CLng(dteMin), _
                rngDates, "<" & CLng(dteMax), _
                rngCrit1, arrSplit(i), rngCrit2, strCrit2)
    Next i

End Sub


Private Sub cmdCancel_Click()
    Unload Me
End Sub

Private Sub txtMinDate_AfterUpdate()
    If IsDate(Me.txtMinDate) Then
        Me.txtMinDate = Format(CDate(Me.txtMinDate), strDateFormat)
    Else
        MsgBox "Invalid Minimum date. Please re-enter a valid date."
    End If
End Sub

Private Sub txtMaxDate_AfterUpdate()

    If IsDate(Me.txtMaxDate) Then
        Me.txtMaxDate = Format(CDate(Me.txtMaxDate), strDateFormat)
    Else
        MsgBox "Invalid Maximum date. Please re-enter a valid date."
    End If
End Sub

Private Sub chkEntireRng_Click()
    Dim wf As WorksheetFunction
    Dim ws As Worksheet
    Dim rngDates As Range

    Set wf = WorksheetFunction
    Set ws = Worksheets(strShtName)
    With ws
        Set rngDates = .Columns(strDateRng)
    End With
    If Me.chkEntireRng = True Then
        Me.txtMinDate = Format(wf.Min(rngDates), strDateFormat)
        Me.txtMaxDate = Format(wf.Max(rngDates), strDateFormat)
        Me.txtMinDate.Enabled = False
        Me.txtMaxDate.Enabled = False
    Else
        Me.txtMinDate = ""
        Me.txtMaxDate = ""
        Me.txtMinDate.Enabled = True
        Me.txtMaxDate.Enabled = True
    End If

End Sub
＆＃13;
＆＃13;
＆＃13;

如果您想拥有标题的动态高度，可以在javascript中动态计算它。

答案 2 :(得分：0)

如果您想要调整背景图片大小，请更改.box高度！

https://jsfiddle.net/t87tjmmk/ 

setInterval(function(){

    var height = $(".box").height();

    $(".window").height(height+2); }, 1000);

答案 3 :(得分：0)

我在这里实现了你想要的。 See Demo here

HTML 

<div class="box">
    <div class="box-header">
      header
    </div>
  <div class="box-body">
      <div id='w' class="window">
      </div>
  </div>
</div>

的JavaScript 

var w=document.getElementById('w');
    var x=192;

    setInterval(function(){

        var height = $(".box").height();
        $(".box").height(height+2);
    w.style.minHeight=x+"px";
    x+=2;    
    },90);

CSS 

.box{    
        height: 100%;
        background-color: #22ff2f;
        width:350px;
      }
    .box-header{position:inherit; background-color:#9ed;width:100%;}
    .box-body{}

    .window{
        background-position: center;   
        background-image: url('http://dailybestlike.com/wp-content/uploads/2015/07/simple-ideas-products-11.jpg');
        min-height:190px;
         width:100%;
      height:100%;
        position:relative;
        text-align:center;
        overflow:hidden;
        background-repeat:no-repeat;
        background-size: 100% 100%;

    }
相关问题
最新问题