Tính chiều cao div cho chiều rộng đã biết?

8

Tôi có một div chứa một hình ảnh và một số văn bản (hình ảnh có kích thước thay đổi và văn bản có độ dài thay đổi).
Có cách nào để tính chiều cao cần thiết để phù hợp với tất cả nội dung div, với điều kiện là chiều rộng chính xác được xác định trước không?

CẬP NHẬT nhận được kết quả sai tương tự khi sử dụng $(document).ready()

document.addEventListener("DOMContentLoaded", function ()
{
		var div = document.getElementById("Content");
		var res = document.getElementById("Result");

		res.innerHTML = div.offsetHeight; // incorrect - returns 252 while the real height is 360 (Firefox, Chrome)
});

div
	{
		width: 400px;
	}

	img
	{
		float: left;
		margin: 0.5em;
}

<div id="Content">

	<img src="https://picsum.photos/id/82/200/150" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>

Mở rộng đoạn trích

javascript css

— người dùng626528
nguồn

2

@Rob đây không phải là một câu hỏi chính đáng, điều gì làm cho nó lạc đề?

— Tom M

Bạn có muốn một cách javascript hoặc css thuần túy?

— Bussyroopo

@Bussyroopo JS sẽ ổn thôi.

— dùng626528

2

AFAIK bạn không thể có được chiều cao chính xác trước khi tải hình ảnh, vì bạn không biết kích thước hình ảnh. Vì vậy, tôi nghĩ rằng bạn sẽ chỉ có thể nhận được giá trị chính xác sau khi tải hình ảnh, onloadsau đó sử dụng chiều cao bên trong cuộc gọi lại

— Calvin Nunes

Jquery có ổn không?

— Fahim Khan

2

Bạn phải sử dụng window.onloadthay thế.

Sự kiện tải được kích hoạt khi toàn bộ trang đã được tải, tôi bao gồm tất cả các tài nguyên phụ thuộc như biểu định kiểu và hình ảnh . Điều này trái ngược với DOMContentLoaded, được kích hoạt ngay khi DOM trang được tải , mà không cần chờ tài nguyên tải xong. ^{tham chiếu}

Trong trường hợp của bạn, bạn cần chờ hình ảnh và không chỉ DOM.

window.onload = function() {
  var div = document.getElementById("Content");
  var res = document.getElementById("Result");

  res.innerHTML = div.offsetHeight; 
};

div {
  width: 400px;
}

img {
  float: left;
  margin: 0.5em;
}

<div id="Content">

  <img src="https://picsum.photos/id/82/200/150" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce.
  Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus
  vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et
  malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>

Mở rộng đoạn trích

— Temani Afif
nguồn

5

Để xác định chính xác chiều cao của div và hình ảnh. Điều này là do hình ảnh có thể sẽ hoàn tất tải lần cuối - nếu kiểm tra chiều cao của container trước khi hình ảnh được tải, nó sẽ trả về chiều cao mà không xem xét chiều cao hình ảnh.

Một người nghe nên được thêm vào hình ảnh để nó kiểm tra chiều cao một khi hình ảnh tải.

img.addEventListener('load', onLoad);

Bởi vì kiểu dáng đơn giản offsetHeightvà clientHeightnên hoạt động nhưng phải bao gồm toàn bộ phần tử (có viền và lề) được sử dụng scrollHeightnhư được mô tả bởi Element.scrollHeight trên tài liệu web MDN

Mã kết quả:

<div id="Content">
    <img id="Image" src="https://picsum.photos/id/82/200/150" />
    ...
</div>
<br/>
<span id="Result"></span>
<script>
    var img = document.getElementById("Image");

    function onLoad() {
        var div = document.getElementById("Content");
        var res = document.getElementById("Result");

        res.innerHTML = div.scrollHeight;
    }

    img.addEventListener('load', onLoad);
</script>

Toàn bộ ví dụ là trong CodeSnadbox tại đây:

— Seth Corker
nguồn

2

Tôi không chắc chắn tôi hoàn toàn hiểu câu hỏi của bạn, nhưng bạn có thể sử dụng javascript để tính chiều cao của một div.

var height = document.getElementsByTagName('div').offsetHeight;

— Armedin Kuka
nguồn

Có vẻ như phép đo này là chính xác khi tôi nhận được 252 và div thực tế trông cao hơn 350 pixel. Ngoài ra, tôi nhận được các phép đo khác nhau ngay sau khi mở tài liệu và sau khi làm mới nó (Firefox).

— dùng626528

Có một cách khác : document.getElementsByTagName('div').getBoundingClientRect().height. Hãy thử điều này và cho tôi biết nếu nó hoạt động.

— Armedin Kuka

1

Vấn đề tương tự với cái này Có lẽ đó là một cái gì đó về các giai đoạn kết xuất khác nhau?

— dùng626528

1

Tôi biết rằng bạn đang yêu cầu thay đổi kích thước div một khi hình ảnh tải để làm cho div cao hơn, nhưng chỉ là một nhận xét bên lề, bạn có biết / bạn đã thử kích thước nền: chứa chưa?

Theo quy định của MDN:

Giá trị chứa chỉ định rằng, bất kể kích thước của hộp chứa, hình nền phải được thu nhỏ sao cho mỗi bên càng lớn càng tốt trong khi không vượt quá chiều dài của cạnh tương ứng của thùng chứa.

Giá trị bìa:

Giá trị bìa xác định rằng hình nền phải có kích thước sao cho càng nhỏ càng tốt trong khi đảm bảo rằng cả hai kích thước đều lớn hơn hoặc bằng kích thước tương ứng của vật chứa. Hãy thử thay đổi kích thước ví dụ dưới đây để thấy điều này trong thực tế.

Khi kết hợp với vị trí nền tôi nghĩ nó có thể thực sự hữu ích

— Jenaro Calvi
nguồn

1

Nếu bạn muốn sử dụng jquery thì đây là cách

$(document).ready(function(){
  $("#Result").html($("#Content").height());
})

div
	{
		width: 400px;
	}

	img
	{
		float: left;
		margin: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Content">

	<img src="https://picsum.photos/id/82/200/150" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>

Mở rộng đoạn trích

— Khan Khan
nguồn

Bạn nghiêm túc chứ? jquery hiện được coi là sự tái sinh của ác quỷ, cho phép họ phát điên với js thuần túy.

— Fabio Caccamo

0

Không linh hoạt, vì bạn có chiều rộng được đặt, sẽ không khó để tính toán vì nó sẽ không thay đổi trong các màn hình khác nhau. Nhưng cách duy nhất là thực hiện nó SỬ DỤNG CÔNG CỤ DEV.

Nếu hình ảnh và phông chữ sẽ thay đổi, bạn có thể có một tập lệnh javascript mà sau khi bật, nó sẽ thấy div có chiều cao bao nhiêu. (nếu bạn cần bình luận này bên dưới)

— Renaldo Balaj
nguồn

0

Trong js bạn có thể lấy chiều cao của bất kỳ phần tử nào. chiều rộng là không cần thiết để tính chiều cao.

vì div là một số thẻ chung, hãy thêm một số id để cụ thể để đảm bảo thẻ đúng được nhắm mục tiêu để tính chiều cao

var element_height = document.getElementById("ElToCalHeight").offsetHeight;
alert('Element height ' + element_height);

<div id="ElToCalHeight">

	<img src="https://picsum.photos/id/82/200/150" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo...

</div>

Mở rộng đoạn trích

— Ganeshkumar K
nguồn

0

Bạn có thể sử dụng tài sản .scrollHeight .

document.addEventListener("DOMContentLoaded", function() {
  var div = document.getElementById("Content");
  var res = document.getElementById("Result");

  res.innerHTML = div.scrollHeight; 
});

div {
  width: 400px;
}

img {
  float: left;
  margin: 0.5em;
}

<div id="Content">

  <img src="https://picsum.photos/id/82/200/150" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce.
  Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus
  vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et
  malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>

Mở rộng đoạn trích

— Kalimah
nguồn

0

Sự kiện DOMContentLoaded được kích hoạt khi trình duyệt tải đầy đủ HTML và cây DOM được xây dựng, nhưng các tài nguyên bên ngoài như hình ảnh và bảng định kiểu chưa được tải. Trong khisự kiện window.onload được kích hoạt khi toàn bộ trang được tải bao gồm các kiểu, hình ảnh và các tài nguyên khác.

Và bạn có chiều cao là 252 thay vì 360 vì chiều cao của div không có hình ảnh của bạn là 252. Để tham khảo, bạn có thể chạy đoạn trích dưới đây.

Đoạn mã này tương ứng với div không có hình ảnh và sử dụng window.onload (Vì vậy, chiều cao là 252)

window.onload = function() {
  var div = document.getElementById("Content");
  var res = document.getElementById("Result");

  res.innerHTML = div.offsetHeight; 
};

div
	{
		width: 400px;
	}

/**	img
	{
		float: left;
		margin: 0.5em;
}**/

<div id="Content">
  <!-- Image tag is not present -->
	<!--<img src="https://picsum.photos/id/82/200/150" />-->

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>

Mở rộng đoạn trích

Đoạn mã sau đây tương ứng với div với hình ảnh và sử dụng window.onload và bây giờ chiều cao sẽ tăng lên 360 như mong đợi.

window.onload = function() {
  var div = document.getElementById("Content");
  var res = document.getElementById("Result");

  res.innerHTML = div.offsetHeight; 
};

div
	{
		width: 400px;
	}

	img
	{
		float: left;
		margin: 0.5em;
}

<div id="Content">

	<img src="https://picsum.photos/id/82/200/150" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>

Mở rộng đoạn trích

— Trina Choudhury
nguồn

0

Làm việc 100%! sử dụng hàm Window.onload thay vì DOMContentLoaded

  <script>
      window.onload = function() {
      var div = document.getElementById("Content");
      var res = document.getElementById("Result");

      res.innerHTML = div.offsetHeight; 
    };
    </script>

Sẽ cho kết quả của bạn!

— Krishna Savani
nguồn

0

Bạn nên kiểm tra phương pháp element.getBoundingClientRect()sau khi tải. Nó sẽ trả về một tập các thuộc tính như chiều rộng và chiều cao.

— Lew
nguồn